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-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门:初学者的简单教程
- 2024-11-23JAVA副业入门:初学者的实战指南