大家好，今天给大家分享鼠标双击变成属性，一起来看看吧。4.6自定义属性的操作1.获取属性值element.属性 获取属性值element.getAttribute(&39;);<body> &l...
大家好，今天给大家分享鼠标双击变成属性，一起来看看吧。
4.6自定义属性的操作
1.获取属性值
- element.属性 获取属性值
- element.getAttribute(&39;);
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute(&39;); 主要获得自定义的属性（标准）我们程序员自定义的属性。
2.设置属性值
- element.属性=‘值’设置内置属性值。
- element . setAttribute(&39;，&39;) ;
3.移除属性removeAttribute(属性)
<body> <div id=&34; index=&34;></div> <script> var div = document.querySelector(&39;); //1.获取元素的属性值 //(1)element.属性 console.log(div.id); //(2)elemnt.getAttribute(&39;) get得到获取attribute属性的意思 自己添加的属性称为自定义属性index console.log(div.getAttribute(&39;)); console.log(div.getAttribute(&39;)); //2.设置元素属性值 // (1)element.属性=&39; div.id = &39;; div.className = &39;; //(2)element . setAttribute(&39;，&39;) ; 主要针对自定义属性 div.setAttribute(&39;,2); div.setAttribute(&39;,&39;); //class 特殊 这里面写的就是class 而不是className //3.移除属性removeAttribute(属性) div.removeAttribute(&39;); </script></body>案例：tab栏切换（重点案例）
- 当鼠标点击上面相应的选项卡（tab）,下面内容跟随变化
案例分析：
- Tab栏切换有2个大的模块
- 上的模块选项卡,点击某一个，当前这一个底色会是红色，其余不变(排他思想)修改类名的方式
- 下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
- 规律:下面的模块显示内容和上面的选项卡-对应 ,相匹配。
- 核心思路:给.上面的tab_ list 里面的所有小i添加自定义属性，属性值从0开始编号。
- 当我们点击tab_ list 里面的某个小i，让tab_ .con 里面对应序号的内容显示，其余隐藏(排他思想)
//1.获取元素
var tab_list = document.querySelector(&39;); var lis = tab_list.querySelectorAll(&39;); var items = document.querySelectorAll(&39;); //for循环绑定点击事件 for(var i = 0; i<lis.length; i ){ //开始给5个小li 设置索引号 lis[i].setAttribute(&39;,i); lis[i].onclick = function(){ //干掉所有人 其余的li清除 class 这个类 for(var i = 0; i<lis.length; i ){ lis[i].className = &39;; } //留下我自己 this.className = &39;; //2.下面的显示内容模块 var index = this.getAttribute(&39;); console.log(index); //干掉所有人 让其余的item 这些div隐藏 for(var i = 0; i < items.length; i ){ items[i].style.display=&39;; } items[index].style.display = &39;; } } </script></body>以上就是鼠标双击变成属性的内容分享，希望对大家有用。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权发表，未经许可，不得转载。
