获取元素的方法:
- 通过id获取元素
document.getElementById('id名字')- 通过class名字获取
document.getElement s ByClassName('class名字')注意: 通过class去取值,即便取到的只有一个元素,也要用下标取值 // 获取的是一个集合,是多个元素, 不是数组,是类数组 var actives = document.getElementsByClassName('active');
// 获取元素的class为active的元素,添加上背景颜色为red
console.log(actives);// 不能给这个集合添加颜色,要通过这个集合找到具体的一个元素,然
后添加背景
// actives.style.background = 'red'; // 这种用法是错要通过下标去集合中找元素 下标从0开始 集合的长度:length actives[0].style.background = 'red'; actives[1].style.background = 'red'
// 给每一个元素添加背景颜色,用for
for(var i = 0; i < actives.length; i++){
actives[i].style.background = 'red';
}案例:<ul class="list"> <li class="active">通过class获取</li> <li>通过class获取</li> <li class="active">通过class获取</li> <li>通过class获取</li> </ul> 1. 从整个文档找 var actives = document.getElementsByClassName('active');
【从整个文档中class名为active的li】
console.log(actives);2.var list = document.getElementsByClassName('list'); 【先找ul】 这个是从ul下找的 var list_actives = list[0].getElementsByClassName('active'); 【第一个ul下面class名为active的li】 console.log(list_actives);
- 通过class名字获取
3.通过tagName名字获取
1)整个文档去找
document.getElementsByTagName('标签名字')
2)找某个元素符合条件的集合
元素.getElementsByTagName('class名字')
案例:1. 从整个文档找
var ps = document.getElementsByTagName('p');
【找p标签】
ps[0].style.background = 'red';
console.log(ps);
2.找某个元素符合条件的集合
var uls = document.getElementsByClassName('list');
【找class名为list的ul】
var lis2 = uls[1].getElementsByTagName('li');
【第一个ul下标签名为li所有标签】
console.log(lis2);
- 通过css的选择器
只能获取一个,如果是多个,默认值获取第一个
document.querySelector('css选择器')
元素.querySelector('css选择器')
获取多个
document.querySelectorAll('css选择器')
元素.querySelectorAll('css选择器')案例: 【获取一个】
var box = document.querySelector('#box');
console.log(box);【获取多个】 // 也是集合,通过下标取 var actives = document.querySelectorAll('.active'); console.log(actives[0]); 【class名为active的所有元素,根据下标为0打出第一个】 var lis = document.querySelectorAll('.list1 li'); console.log(lis); 【取ul里面的li,通过class名找】 var list1 = document.querySelector('.list1'); 【通过css选择器 class 找到.list】 var lis2 = list1.querySelectorAll('li'); 【通过元素找到所有li集合】 console.log(lis2)
练习案例:生成10个div
<div id="box">
<!-- <div></div>
<div></div>
<div></div> -->
</div>
<script>// 隔行变色 奇数个背景为blue,偶数个背景为green var box = document.querySelector('#box'); var str = ''; for(var i = 0; i < 10; i++){ //var str = ''; // 每一次循环都会重新生成str str += '<div></div>' } [最后把形成的div放在box里面] box.innerHTML = str; </script>
- 取模
奇数 数字%2 有余数就是奇数
偶数 数字%2 == 0求余数 用 % 取模: 取余 的整数 求一个数除以另一个数的余数 左边小于右边,返回的是左边的值 左边和右边相同,返回是0 左边大于右边,返回的是左边除以右边的余数 案例:
需求:生成10个div隔行变色 奇数个背景为blue,偶数个背景为
green<div id="box"> <!-- <div></div> <div></div> <div></div> --> </div> var box = document.querySelector('#box'); var str = ''; for(var i = 0; i < 10; i++){ // i为0 代表的是第一个 if (i % 2 == 0) { // i是偶数 str += '<div style="background: blue;"></div>' }else{ str += '<div style="background: green;"></div>' } } box.innerHTML = str; </script> 案例:生成10*10方格 <style> #box div { width: 80px; height: 80px; background: red; display: inline-block; margin: 10px; font-size: 30px; color: #fff; position: absolute; left: 0; top: 0; } </style> <script> var box = document.querySelector("#box"); var str = ''; var row = -1;【行数设为-1】 【需求:生成100个div,每行10个】 for(var i = 0; i < 100; i++){ // 每一行div的left都是 (0-9) * 80 /* 第一行i: 0 - 9 i%10= 0-9 第二行i: 10-19 i%10= 0-9 第三行i: 20-29 i%10= 0-9 */ // i: 0 10 20 30 90 if(i % 10 == 0 【为偶数时行数加1】){ row++;【第一个i=0,row=0,为第一行】 } 【div用定位排开】 str += '<div style="left【左边定位】:'+ (i%10)*90【每一行都有0-9个,当下标为10 时,i%10=0,与第一个div重叠,,以后每当 i%10=0时都重叠】+'px; top【上边定位】:'+row*90【行与行之间差一 个div的宽度】+'px;">'+ (i)+'</div>' } box.innerHTML = str; </script> 案例: 需求:生成V字型的图片 <style> #box { width: 500px; height: 500px; margin:0px auto; position: relative; border: 1px solid #000; } #box div { width: 50px; height: 50px; position: absolute; left: 0px; top: 0px; background: red; } </style> <div id="box"> <div style="left:0px;top:0px;">123</div> </div> <script> 【//获取变量】 var box = document.querySelector('#box'); 【声明一个空的变量】 var str = ''; 【/5个div在上 ,数字2向下】 for(var i = 0; i < 5; i++){ if (i <= 2) { //以下标2为判断条件 //top值是递增的 下标小于等于2的时候 left值也是递增的 str += '<div style="top:'+(i*50)+'px;left:'+ (i)*50+'px;">'+i+'</div>' }else{ //下标大于2的时候left值就递减等于总的最 大的i减去判断界限 , 第三个距离底部一个(4-i)*50 四个距离底部为0 str += '<div style="top:'+(i*50)+'px;left:'+(4- i)*50+'px;">'+i+'</div>' } } //最后把形成的div放在boxTop里面 box.innerHTML = str; // for循环是从0开始到100, 【思路】 for(var j = 0; j < 5; j++){ //console.log(j); // 从小到大 0 1 2 3 4 //console.log(4-j); // 从大到小 // 预期:2,1, 0,1 ,2, i的值2- 0 , 2-1 ,2-2 , 3-2 ,4-2 if(j <=2){ console.log( 2 - j ); }else{ console.log( j - 2 ); } } </script> 图片:
小案例:
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复