前端JavaScript学习

JavaScript最后

元素的属性

获取元素的属性

所有的HTML元素，我们可以根据具体需求，

自定义添加属性<div haha=“abc” id=“xyz” name=“123”></div>

获取这个属性的值

为什么name拿不到，id能拿到

元素.属性名的方式只适用于元素原生的属性

方法 getAttribute(“属性名”)

设置元素的属性

div.className=“mmm”;//设置class属性的值

div.setAttribute(“class”,“nnn”);

设置其他的属性和值

div.setAttribute(“haha”,“hijklmn”);

删除属性

div.removeAttribute(“haha”);

拿到元素的所有的属性

返回的结果是一个属性节点的映射和集合

<div haha="abc" id="xyz" class="nnn"></div>
<script>
            let div = document.querySelector("div");
            console.log(div.attributes);
            console.log(div.attributes[1]);
            console.log(div.attributes[1].name);
            console.log(div.attributes[1].value);
            div.attributes[1].value="xxx";
        </script>

设置元素行内样式

 <div>112233</div>
        <script>
            let div = document.querySelector("div");
            div.id = "aaa";
            div.title = "bbb";
            // 样式特殊 className
            div.className = "fontStyle";
            // 行内css样式
            div.style = "color:yellow;display:inline";
        </script>

BOM<