JS操作DOM元素属性
元素属性：
1.行内标准样式
2.行内自定义属性
3.行外属性
4.点语法动态添加的属性
操作元素属性方法
点语法、字符串语法操作元素
注意点：
1.只能获取行内属性，不能获取行外属性
2.获取到的是带单位的字符串
3.属性既可以获取，也可以修改
4.获取类名使用className，不能使用class，因为class是关键字
类名属性设置：
直接赋值会覆盖原本的样式
<div id="box" class="one"></div>
var box=document.getElementById("box");
box.className="two";
如果要多个样式 使用字符串连接符（使用的时候要注意 要加一个空格，否则会变成一个字符串）
box.className += " two";
点语法获取元素的特点
1.可以获取标准属性
2.可以获取点语法动态添加的属性
console.log(box.aaa);
3.无法获取行内自定义属性
console.log(h1.www);//undefined
4.无法获取行外属性
console.log(box.style.height);//空字符串
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box{
background-color: aqua;
height: 100px;
}
.one{
color: blue;
}
.two{
margin: 30px;
}
</style>
</head>
<body>
<div id="box" class="one" style="width: 100px; background-color: antiquewhite;">
我是div
</div>
<h1 id="h1" www="sss">我是标题标签</h1>
</body>
//修改div背景颜色
//1.获取元素
var box=document.getElementById("box");
//获取对象属性
console.log(box.id);
console.log(box["id"]);
console.log(box.className);
console.log(box.style);
console.log(box.style.width);//100px 带单位
console.log(box.style.height)//如果没有这个属性，获取到的不是undefined，而是空字符串
//如果在js里面去操作html样式属性，如果遇到 - ，把命名改成驼峰命名法
console.log(box.style.backgroundColor);
//给对象赋值
box.style.backgroundColor="red";
//获取点语法动态添加的属性
box.aaa="bbb"
console.log(box.aaa);
//无法获取行内自定义属性
console.log(h1.www);//undefined
//无法获取行外属性
console.log(box.style.height);//空字符串
attribute操作元素属性
attribute 属性
获取元素属性：元素.getAttribute(“属性名”);
设置元素属性：元素.setAttribute(“属性名”,“属性值”);
移除元素属性：元素.removeAttribute(“属性名”); 参数是字符串，
所以无需考虑js命名规则，html中的属性名是什么就写什么
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
height: 200px;
}
</style>
</head>
<body>
<div id="box" class="one" www="sss"style="color: #00FFFF;background-color: yellow;width: 100px;">
我是div
</div>
</body>
特点：
1.可以获取行内标准属性
console.log(box.getAttribute("id"));
2.可以获取行内自定义属性(主要是用来操作行内自定义属性)
console.log(box.getAttribute("www"));
3.无法获取行外元素
console.log(box.getAttribute("style.height"));//null
4.无法获取点语法动态添加的属性
box.aaa="bbb";
console.log(box.getAttribute("aaa"));//null
修改元素属性
点语法清除操作
如点语法去掉类名
box.className=""
attribute清除元素属性
box.removeAttribute("class");
attribute设置属性
box.setAttribute("www","123");
attribute案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
</ul>
</body>
<script>
//需求：点击li标签，显示对应索引
//1.获取元素
var lis=document.getElementsByTagName("li");
//2.遍历数组
for(var i=1;i<=lis.length;i++){
//a.给每一个li标签添加一个自定义索引的属性
lis[i-1].setAttribute("index",i);
console.log(lis[i-1].getAttribute("index"));
//b.给li元素注册点击事件
lis[i-1].onclick=function(){
alert(this.getAttribute("index"))
}
}
</script>
</html>
选项卡案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dom</title>
<style>
.box{
width: 100%;
height: 800px;
border: 1px solid black;
}
#btn{
width: 800px;
height: 50px;
margin-left: 50px;
}
#btn li {
width: 150px;
height: 40px;
background-color: pink;
float: left;
list-style: none;
margin-left: 30px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
#btn .btn1 {
background-color: skyblue;
}
#tab li {
width:90%;
height: 500px;
margin-left: 80px;
background-color: #ccc;
list-style: none;
display: none;
line-height: 30px;
text-indent: 10px;
}
#tab .tab1 {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div id="btn">
<ul>
<li class="btn1">table1</li> //默认显示
<li>table2</li>
<li>table3</li>
<li>table4</li>
</ul>
</div>
<div id="tab">
<ul>
<li class="tab1">内容1</li> //默认显示
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
</div>
<script>
var btnlis = document.querySelectorAll("#btn li");
var tablelis = document.querySelectorAll("#tab li");
for (var i = 0; i < btnlis.length; i++) {
//为每个li添加一个index属性
btnlis[i].setAttribute("index", i);
btnlis[i].onclick = function() {
for (var i = 0; i < btnlis.length; i++) {
//让每个li清除class
btnlis[i].className = "";
tablelis[i].className = "";
}
//点击的这个li添加class
this.className = "btn1";
//获取点击的li的属性index
var index = this.getAttribute('index');
tablelis[index].className = 'tab1';
}
}
</script>
</html>
