setAttibute()和getAttitude()不常用？一个小案例让你看到他们的妙处。

大家好，我是讯享网，很高兴认识大家。

案列介绍

 这是一个导航栏切换选项卡的小案例，通过这个案例就能体现setAttibute()和getAttitude()美妙之处。

讯享网

了解一下基本语法

getAttribute() 获取标签属性的值

讯享网 <a href="http://www.baidu.comm" id="zhi"></a>

 var zhi=document.getElementById('zhi'); zhi.getAttribute('href');//获取到a标签href的值

setAttribute() 设置标签属性和属性值

讯享网 <h2 class="h2">标题1</h2>

 var h2=document.querySelector('h2');//获取元素 h2.setAttribute('class','h3');//修改值 h2.setAttribute('index','1');//新增加一个属性和值

setAttribute(‘属性名’，‘属性值’)，如果存在改属性(js原生属性)，覆盖他的属性值，如果不存在就新增一个属性。

removeAttribute() 删除属性

讯享网 var h2=document.querySelector('h2');//获取元素 h2.setAttribute('class','h3');//修改值 h2.setAttribute('index','1');//新增加一个属性和值 h2.removeAttribute('index');//删除index属性

removeAttribute(‘属性名’)删除之后变为null，不赋值就变为undefined

讯享网

代码

<!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> * { 
      /* 清除默认样式 */ padding: 0; margin: 0; list-style: none; } ul { 
      /* 字体大小、宽高、背景色、水平居中和定位(父相子绝) */ font-size: 14px; width: 595px; height: 42px; text-align: center; background-color: #ebebeb; margin: 0 auto; position: relative; } li { 
      /* 每个选项的宽高、左浮动、字体加粗 */ width: 85px; float: left; line-height: 42px; font-weight: 700; } .list_div { 
      /* 宽高边框、定位(父相子绝) */ width: 595px; height: 420px; border: 1px solid rgb(88, 85, 85); font-weight: 500; color: black; line-height: 18px; box-sizing: border-box; position: absolute; /* top的值为ul的高度,left的值为0 */ top: 42px; left: 0px; } /* 导航栏的显示内容先不显示 */ .container li>div { 
      display: none; } /* js调用的样式，背景颜色和字体颜色 */ .change { 
      background: rgb(198, 24, 24); color: rgb(247, 247, 247); } </style> </head> <body> <!-- div的宽度默认100% --> <div class="container"> <!-- ul的宽度595px，居中显示，导航栏一般都是用无序列表做的--> <ul class="ul"> <li>首页 <div class="list_div">这是首页内容--阿瓜老板噶萝卜干</div> </li> <li>前端 <div class="list_div">这是前端内容-阿瓜老板噶萝卜干</div> </li> <li>后端 <div class="list_div">这是后端内容-阿瓜老板噶萝卜干</div> </li> <li>软件测试 <div class="list_div">这是软件测试内容-阿瓜老板噶萝卜干</div> </li> <li>云计算 <div class="list_div">这是云计算内容-阿瓜老板噶萝卜干</div> </li> <li>Python <div class="list_div">这是Python内容-阿瓜老板噶萝卜干</div> </li> <li>联系我们 <div class="list_div">这是联系我们内容-阿瓜老板噶萝卜干</div> </li> </ul> </div> <!-- div结束 --> </body> <script> // 获取所有的li元素保存到lis里面 var lis = document.querySelectorAll("li"); // 获取所有的li下的div元素保存到list_divs里面 var list_divs = document.querySelectorAll('.list_div'); for (var i = 0; i < lis.length; i++) { 
      // setAttribute() 添加或修改标签的属性。 // 为每个li添加一个index属性，属性值为i。 lis[i].setAttribute('index', i); // 当点击第i个选项卡时触发事件 lis[i].onclick = function () { 
      for (var j = 0; j < lis.length; j++) { 
      // 先把所有的li的样式设置为默认样式，排他性原理 lis[j].className = ""; } // 再改变当前点击(i)的样式。 this.className = 'change'; // 关键点 获取到当前点击的的属性值赋值给index var index = this.getAttribute('index'); // 还是利用排他性原理显示内容 for (var j = 0; j < list_divs.length; j++) { 
      list_divs[j].style.display = "none"; } list_divs[index].style.display = "block"; } } </script> </html>

运行结果

在这里插入图片描述

setAttibute()和getAttitude()不常用？一个小案例让你看到他们的妙处。

案列介绍

了解一下基本语法

getAttribute() 获取标签属性的值

setAttribute() 设置标签属性和属性值

removeAttribute() 删除属性

代码

运行结果

相关推荐