js操作元素属性

操作元素属性方法

(1)点语法获取元素属性
1.可以获取标准属性(主要)
2.可以获取点语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行外属性

//style属性是一个对象 存储的是元素的样式
console.log(box.style); 
//color属性在行外样式表中定义
console.log(box.style.color);    //空字符串
//无法获取行内自定义属性
console.log(box.index);   //undefined

补充：js设置元素属性，有‘-’的命名改成驼峰命名法
box.style.backgroundColor = “red”;

(2)Attribute获取元素属性
获取元素属性：元素.getAttribute(“属性名”)
设置元素属性：元素.setAttribute(“属性名”,属性值)

	// 1.可以获取标准属性
    // 2.可以获取行内自定义属性(主要操作行内自定义属性)
    // 3.无法获取行外属性
    // 4.无法获取点语法自定义属性

setAttribute()设置自定义属性名应以‘data-’开头

console.log(box.getAttribute("id"));
console.log(box.getAttribute("data-index"));

移除元素属性

box.removeAttribute("class");

Attribute案例：点击li标签，显示对应索引

<ul>
        <li>我第1个li标签</li>
        <li>我第2个li标签</li>
        <li>我第3个li标签</li>
        <li>我第4个li标签</li>
        <li>我第