Javascript 在网页中直接使用
2021/10/16 9:39:29
本文主要是介绍Javascript 在网页中直接使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
获取元素 getElements;
按标签名称获取元素 getElementsByTagName;
按名称获取元素 getElementByName;
按类名获取元素 getElementsByClassName;
通过ID 获取元素 getElementById
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>在网页中直接使用<script>js code</script></title> <meta name="Keywords" content="关键字"> <meta name="description" content="简介"> <style> p { transition: all .3s; } </style> </head> <body> <p>Lorem ipsum dolor.</p> <p>Assumenda, enim, odit.</p> <p>Aut, praesentium, quisquam!</p> <p>Eligendi, excepturi, ullam?</p> <p>Delectus praesentium, repudiandae?</p> <p>Amet, laudantium, temporibus?</p> <script> /*获取元素 getElements; *按标签名称获取元素 getElementsByTagName *按名称获取元素 getElementsByName *按类名获取元素 getElementsByClassName *通过 ID 获取元素 getElementById * */ let ps = document.getElementsByTagName('p') for (let p of ps) { p.style.border = "1px solid gray" p.style.padding = '10px' // p.style.width = '300px' //随机宽度 p.style.width = `${Math.round(Math.random() * 300) + 600}px` // p.style.backgroundColor = 'pink' //随机颜色 p.style.backgroundColor = `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.random()})` } setInterval(() => { let ps = document.getElementsByTagName('p') for (let p of ps) { p.style.border = "1px solid gray" p.style.padding = '10px' //随机宽度 p.style.width = `${Math.round(Math.random() * 300) + 600}px` //随机背景颜色 p.style.backgroundColor = `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.random()})` //随机字体颜色 p.style.color = `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)}` } }, 2000) </script> </body> </html>
这篇关于Javascript 在网页中直接使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Java部署教程:新手入门指南
- 2024-11-01Java部署教程:从入门到实践
- 2024-11-01Java订单系统教程:新手入门指南
- 2024-11-01Java分布式教程:新手入门指南
- 2024-11-01Java管理系统教程:新手入门详解
- 2024-11-01Java监控系统教程:从入门到实践
- 2024-11-01SpringCloud Alibaba入门:轻松搭建微服务架构
- 2024-11-01Swagger入门:新手必读指南
- 2024-11-01Swagger入门:轻松搭建API文档
- 2024-11-01uni-APP入门:新手快速上手指南