案列介绍
这是一个导航栏切换选项卡的小案例，通过这个案例就能体现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>
运行结果
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。