码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-06-19 01:30:17      阅读:306      评论:0      收藏:0      [点我收藏+]

标签:

一、获取特定元素节点的属性的值_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的DOM_获取/设置/移除特定元素节点的属性_getAttribute()/setAttribute()/removeAttribute()

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4587423.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!