1.获取属性值
element.属性 获取属性值
element . getAttribute ('属性');
区别:
element . 属性 获取内置属性值(元素本身自带的属性)
element . getAttribute ('属性'); 主要获取自定义的属性(标准)我们自定义的属性
<div id="demo" index="2" ></div>
<script type="text/javascript">
var div = document.querySelector('div');
console.log(div.getAttribute('id'));
//自定义属性 index
console.log(div.getAttribute('index'));
</script>
2.设置属性值
element .属性 = '值' 设置内置属性值。
element .setAttribute ('属性','值');
区别:
element. 属性 内置属性值
elemes.setAttribute('属性'); 主要设置自定义的属性(标准)
<div id="demo" index="2" class="dnf"></div>
<script type="text/javascript">
var div = document.querySelector('div');
console.log(div.getAttribute('id'));
//自定义属性 index
console.log(div.getAttribute('index'));
//更改元素属性值
// 1.element.属性 = "值";
div.id = 'test';
div.className = 'nav';
// 2.element.setAttribute('属性','值');主要针对自定义属性
div.setAttribute('index','9');
div.setAttribute('class','footer');
</script>
class 比较特殊,在div.setAttribute('class','footer');中就是 class 不是className
elemes.setAttribute('属性');他既能修改自定义属性,也能修改我们原来的属性
3.移除属性
element.removeAttribute('属性');
<div id="demo" index="2" class="dnf"></div>
<script type="text/javascript">
var div = document.querySelector('div');
console.log(div.getAttribute('id'));
//自定义属性 index
console.log(div.getAttribute('index'));
//更改元素属性值
// 1.element.属性 = "值";
div.id = 'test';
div.className = 'nav';
// 2.element.setAttribute('属性','值');主要针对自定义属性
div.setAttribute('index','9');
div.setAttribute('class','footer');
//删除属性
div.removeAttribute('class');
</script>
top栏切换
<style type="text/css">
*{
margin: 0px;padding: 0px;
}
a{
text-decoration: none;
}
.nav a{
display: block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
background: #ADD8E6;
color: #fff;
margin-right: 10px;
}
.nav a.hover{
background: #0000FF;
}
</style>
<div class="nav">
<!-- javascript:; 取消a标签的跳转样式,不会刷新页面 -->
<a href="javascript:;" class="hover">行业新闻</a>
<a href="javascript:;">动态新闻</a>
<a href="javascript:;">行业资讯</a>
</div>
<script>
//获得所有的nav a标签
var navs = document.querySelectorAll(".nav a");
//给每个a标签 加上一个单击事件
for(var i=0;i<navs.length;i++){
navs[i].onclick = function(){
//让所有的a样式去除
for(var j=0;j<navs.length;j++){
navs[j].className="";
}
//让当前的点击元素加上hover样式
this.className = "hover";
}
}
</script>
自定义属性必须要用 console.log(div.getAttribute('属性')); 否则无法引用