DOM属性详解

2024年2月29日 184次阅读 来源: 王亿萌 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
     div{width: 100px;height: 100px;border: 1px solid #333;margin-bottom: 30px;}
     </style>
</head>
<body>
<div id='qw' style='background:blue'></div>
    <img src="images/1.jpg" alt="" id='im'>
    <script type='text/javascript'>
     var a=document.getElementById('im');
     3种方法属性设置
     （1）属性设置
    // 1.节点对象.属性名=属性值;
    //     注意：特殊属性需要发生名称变化，例如：class--->className for--->htmlFor
    // 2.node.setAttribute(属性名,属性值)
    //     注意：节点属性名与HTML属性名一致
    // 3.node[属性名]=属性值
    //     注意：特殊属性需要发生名称变化，例如：class--->className for--->htmlFor
     // 1)种.
     // a.src='images/2.jpg';
     // 2)种.            属性名  属性值
     // a.setAttribute('src','images/2.jpg');
     // 3)种.
     // a['src']='images/2.jpg';

     // 3种属性获取
     //  （2）属性的获取
                // 1. 节点对象.属性名
                // 2. node.getAttribute(属性名)
                // 3. node[属性名]
     // 1)种.
     console.log(a.src);//绝对路径
     // 2)种
     console.log(a.getAttribute('src'));//相对路径
     // 3)种
     console.log(a['src']);//绝对路径

     // DOM样式的获取：
     //            （1）只能取出行内样式,不能取出样式表样式
     //                 node.style.样式名
     //            （2）取出其它样式
     //                 window.getComputedStyle(节点对象,null)
     //                 返回值：style对象
     var ac=document.getElementById('qw');
     var b=window.getComputedStyle(ac,null).width;
     console.log(b);//输出值是100px
     /*
    DOM中样式的修改
    节点对象.style.样式名=值;
    HTML中样式的名称在DOM中同样有效，
    注意：特殊样式，需要改变   text-align    ---->  textAlign   去掉-，从第二个单词开始首字母大写
     */
     var o=document.getElementById('qw');
     o.style.background='red';

     //为对象新增属性，可以随意新增属性(bc也可以是一个属性，自己定义的)
     a.bc='hello';
     alert(a.bc);
     console.log(a.bc);
    </script>
</body>
</html>
    原文作者：王亿萌
    原文地址: https://segmentfault.com/a/1190000015752974
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞