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