属性的方法操作

Posted 2020-10-06 Me*淡定

属性的方法操作

 

 var div=document.getElementById("box");
    //元素节点.属性 或（元素节点【属性】）：
绑定的属性值不会出现在标签上
    div.index="你好";

 

 

 

get set/removeAttribut:绑定的属性值会出现属性标签上 

 

getAttribute() 方法返回指定属性名的属性值。

<div title="主题" class="abc" id="box">事实上</div>

var div=document.getElementById("box");
    console.log(div.getAttribute("class"))

 

setAttribute()方法添加指定的属性，并为其赋指定的值

                     如果这个指定的属性已经存在，则设置更改值

<div title="主题" class="abc" id="box">事实上</div>

div.setAttribute("title","笑笑十年少");
    console.log(div.title)


div.setAttribute("index","笑");
 console.log(div.getElamentById("index"))

 

案例

 //需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
    var but=document.getElementsByTagName("button");
    for(var i=0; i<but.length; i++){
        //每次循环绑定一个属性，属性值是该盒子的索引值
        //but[i].setAttribute("index",i);
        but[i].index=i;//绑定一个index属性
        but[i].onmouseover=function(){
            //排他思想（干掉所有人，剩下我一个）
            //排他思想是和for循环连用
            for(var j=0; j<but.length; j++){
                but[j].className=""
            }
            this.className="current";
            alert(this.index)
        }
    }