各种选择器练习

Original 2019-02-27 11:18:13 203
abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> </head> <body> <h1>选择器练习</
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>
<h1>选择器练习</h1>
<ul id="uu">
<li class="sel">第一行</li>
<li class="wo">第二行</li>
<li >第三行</li>
</ul>
<form action="" name="car">
<input type="text" name="user">
<input type="password" name="password">
</form>
<a href="" name='fisrt'>首页</a>
<a href="" name='two'>第二页</a>
<script>
// id选择器
let uu = document.getElementById('uu');
uu.style.backgroundColor = 'red';
// name选择器
let form1 = document.getElementsByName('car')
form1.item(0).style.backgroundColor = 'blue';
form1[0].style.backgroundColor = 'yellow';
// 标签名
document.links[0].style.fontSize = '40px';
document.links['two'].style.fontSize = '60px';
// class
let cal = document.getElementsByClassName('sel');
cal[0].style.fontSize = '20px';
// 类选择器
let list = document.querySelectorAll('a') ;
list[0].style.fontSize = '80px';
let ull = document.querySelectorAll('#uu');
ull.item(0).style.backgroundColor = 'pink';
let tt = document.querySelectorAll('.wo');
tt[0].style.fontSize = '120px';
</script>
</body>
</html>

//还有一些不是特别清楚,先练习一下,后面再边练习边理解。提交了要赶后面的视频。想先看完一下。

Correcting teacher:韦小宝Correction time:2019-02-27 11:21:27
Teacher's summary:就是通过选择器来获取对应的元素信息啊 这些还有不清楚的嘛 多练习练习

Release Notes

Popular Entries