内置属性-top栏切换

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('属性'));  否则无法引用