JavaScript的DOM_获取/设置/移除特定元素节点的属性_getAttribute()/setAttribute()/removeAttribute()

一、获取特定元素节点的属性的值_getAttribute()

  1、getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

<script type="text/javascript">

    window.onload = function(){

         var box = document.getElementById('box');

            alert(box.bbb);                        // 获取元素的自定义属性值,非 IE 不支持   自定义的属性不可以,结果是undefined

            alert(box.getAttribute('bbb'));        //获取元素的自定义属性值 这种方法可以兼容自定义属性

            alert(box.getAttribute('class'));    //getAttribute方法获取标签中的class属性的值时在IE6,7中使用className,其他使用class需要做兼容

            

            //跨浏览器获取class属性的值

            if(box.getAttribute('className')==null){

                alert(box.getAttribute('class'));

            }else{

                box.getAttribute('className');

            }

    };

</script>

</head>

<body>

<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div>

</body>

</html>

 

 

 

二、设置特定元素节点的属性的值_setAttribute()

  1、setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。

<script type="text/javascript">

     window.onload = function () {                         

            var box = document.getElementById('box');

            box.setAttribute('title','我是标题啊');

            alert(box.title);   

    };

</script>

</head>

<body>

    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div>

    

</body>

</html>

 

  2、使用该方法设置class和style属性的时候在IE6,7中无效(所以不建议使用)

<script type="text/javascript">

    window.onload = function(){

         var box = document.getElementById('box');

         box.setAttribute('style','color:green');//IE6,7无效

         box.setAttribute('class','pox');//IE6,7无效

          

    };

</script>

</head>

<body>

<div id="box" title="标题" style="color:#F00;" bbb="aaa">测试Div</div>

</body>

 

 

 

 

三、removeAttribute()可以移除 HTML 元素中的属性。 IE6不支持

<script type="text/javascript">

     window.onload = function () {                         

            var box = document.getElementById('box');

            box.removeAttribute('title');

            alert(box.title);

    };

</script>

</head>

<body>

    <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div</div>

    

</body>

</html>

 

你可能感兴趣的:(JavaScript)