获取元素 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>