文章目录
一、定义属性的操作1.获取属性值2.设置元素属性值3. 移除属性 选项卡案例二、H5自定义属性设置H5自定义属性获取H5自定义属性一、定义属性的操作
1.获取属性值
element.属性; 获取属性值.: 获取内置属性值 (元素本身自带的属性)element.getAttribute(‘属性’);: 主要获得自定义的属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="div" index="1"></div><script>var div = document.querySelector('div');console.log(div.id); // divconsole.log(div.getAttribute('index')); // 1</script></body></html>
2.设置元素属性值
element.属性 = 值;修改元素属性值
element.setAttribute('属性', '值');修改自定义属性值.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="div" index="1"></div><script>var div = document.querySelector('div');console.log(div.id); // divconsole.log(div.getAttribute('index')); // 1div.id = 'dddd'console.log(div.id); // dddddiv.setAttribute('index', '2');console.log(div.getAttribute('index')); // 2</script></body></html>
3. 移除属性
element.removeAttribute('属性');
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="div" index="1"></div><script>var div = document.querySelector('div');div.removeAttribute('index');console.log(div.getAttribute('index')); // null</script></body></html>
选项卡案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {color: black;}li {list-style: none;}.ETab {position: relative;width: 990px;}.box {width: 100%;height: 50px;font-size: 14px;/* background-color: #ccc; */border-bottom: 1px solid red;overflow: hidden;margin-bottom: 50px;}.box .current {background-color: red;color: #fff;}.box ul li {float: left;height: 50px;text-align: center;padding: 0px 25px;line-height: 50px;}.boxs {position: absolute;font-size: 12px;}.box1 ul li {width: 50%;padding-left: 42px;}.box ul a:hover {color: red;}.box1 {padding-top: 20px;margin-top: 50px;margin-bottom: 50px;}.box2 ul li {float: left;width: 200px;padding-left: 42px;line-height: 20px;}.boxs1 {position: absolute;}.item {display: none;}</style></head><body><div class="ETab"><div class="box"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li></ul></div><div class="tab_con"><div class="item boxs" style="display: block;"><div class="box1"><ul class="li1"><li>品牌: Apple</li></ul></div><div class="box2"><ul><li>商品名称：AppleiPhone 12</li><li>商品编号：100016034400</li><li>商品毛重：350.00g</li><li>CPU型号：其他</li><li>运行内存：其他</li><li>机身存储：128GB</li><li>摄像头数量：后置双摄</li><li>后摄主摄像素：1200万像素</li><li>前摄主摄像素：1200万像素</li><li>屏幕比例：其他</li><li>分辨率：其他</li><li>屏幕前摄组合：其他</li><li>操作系统：iOS(Apple)</li></ul></div></div><div class="item">规格与包装</div><div class="item">售后保障</div><div class="item">商品评价</div></div></div><script>// 点击变化背景色var boxli = document.querySelectorAll('.box ul li');var items = document.querySelectorAll('.tab_con .item');for (var i = 0; i < boxli.length; i++) {boxli[i].setAttribute('index', i);boxli[i].onclick = function () {for (var i = 0; i < boxli.length; i++) {if (i == 0) {boxli[i].className = 'boxs';}boxli[i].className = '';}this.className = 'current';// 点击切换内容for (var i = 0; i < items.length; i++) {items[i].style = 'display: none;';}var index = this.getAttribute('index');items[index].style = 'display: block;';}}</script></body></html>
二、H5自定义属性
设置H5自定义属性
H5规定自定义属性data- 开头作为属性名并赋值.
比如 :<div data-index="1"></div>
获取H5自定义属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div data-index="1"></div><script>var div = document.querySelector('div');console.log(div.getAttribute('data-index')); // 1// h5新增获取自定义属性console.log(div.dataset.index); // 1console.log(div.dataset['index']); // 1</script></body></html>
dataset 是一个集合, 里面存放了所有以data开头的自定义属性.
