欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript HTML 的 DOM 属性总结（代码实例）

程序员文章站 2022-05-04 14:16:29
javascript html 的 dom 属性总结（代码实例）

javascript html 的 dom 属性总结（代码实例）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
     <style>
     p{width: 100px;height: 100px;border: 1px solid #333;margin-bottom: 30px;}
     </style>
</head>
<body>
<p id='qw' style='background:blue'></p>
    <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>

上一篇： 百度官方解答 淘宝客网站被K与不收录的原因

下一篇： 用eFrameWork框架实现快捷搜索

推荐阅读