JavaScript - 操作元素 - 获取自定义属性值
文章目录
- 一、定义属性的操作
- 1.获取属性值
- 2.设置元素属性值
- 3. 移除属性
- 选项卡案例
- 二、H5自定义属性
- 设置H5自定义属性
- 获取H5自定义属性
一、定义属性的操作
1.获取属性值
- element.属性; 获取属性值. : 获取内置属性值 (元素本身自带的属性)
- element.getAttribute(‘属性’); : 主要获得自定义的属性
<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>Documenttitle>
head><body><div id="div" index="1">div><script>var div = document.querySelector('div');console.log(div.id); // divconsole.log(div.getAttribute('index')); // 1script>
body>html>
2.设置元素属性值
element.属性 = 值; 修改元素属性值
element.setAttribute('属性', '值'); 修改自定义属性值.
<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>Documenttitle>
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')); // 2script>
body>html>
3. 移除属性
element.removeAttribute('属性');
<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>Documenttitle>
head><body><div id="div" index="1">div><script>var div = document.querySelector('div');div.removeAttribute('index');console.log(div.getAttribute('index')); // nullscript>
body>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>Documenttitle><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>品牌: Appleli>ul>div><div class="box2"><ul><li>商品名称：AppleiPhone 12li><li>商品编号：100016034400li><li>商品毛重：350.00gli><li>CPU型号：其他li><li>运行内存：其他li><li>机身存储：128GBli><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- 开头作为属性名并赋值.
比如 :
获取H5自定义属性
<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>Documenttitle>
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']); // 1script>
body>html>
dataset 是一个集合, 里面存放了所有以data开头的自定义属性.
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！