上一节我们介绍了怎么用“对象属性”方式来操作HTML属性，这一节再给大家详细介绍怎么用“对象方法”方式来操作HTML属性。为了操作HTML元素的属性，JavaScript为我们提供了4种方法。

一、getAttribute()

在JavaScript中，我们可以使用getAttribute()方法来获取元素的某个属性的值。 

obj.getAttribute("attr")

obj是元素名，attr是属性名。getAttribute()方法只有一个参数。注意，attr是要用英文引号括起来的，初学者很容易忽略这个问题。下面两种获取属性值的形式是等价的。


obj.getAttribute("attr")
obj.attr

这两种方式都可以用来获取静态HTML的属性值以及动态DOM的属性值。


举例：获取固有属性值


在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
                alert(oBtn.getAttribute("id"));
    </script>
</head>
    <input id="btn" class="myBtn" type="button" value="获取"/>
</body>
</html>

浏览器预览效果如图所示。


在这个例子中，我们可以使用oBtn.id来代替oBtn.getAttribute("id")，因为这两个是等价的。此外，使用obj.getAttribute("attr")这种方式，同样不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态DOM元素中的属性值，这一点跟obj.attr是相同的。


现在最大的疑问就来了，为什么JavaScript要提供两种方式来操作HTML属性呢？JavaScript创建者是不是有点闲得没事做了呢？那肯定不是。我们先来看一个例子。


举例：获取自定义属性值


在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
                alert(oBtn.data);
    </script>
</head>
    <input id="btn" type="button" value="获取" data="JavaScript"/>
</body>
</html>

默认情况下，预览效果如图所示。


当我们点击【提交】按钮后，此时预览效果如图所示。


这里我们为input元素自定义了一个data属性。所谓的自定义属性，指的是这个属性是用户自己定义的而不是元素自带的。此时我们使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute("attr")（也就是对象方法方式）来实现。


当我们把oBtn.data改成oBtn.getAttribute("data")后，然后点击【获取】按钮，此时浏览器预览效果如图所示。


对于自定义属性，我们可能不太熟悉。其实在CSS3动画以及实际开发中用得是非常多的，当然这个是后面的高级知识了。


二、setAttribute()


在JavaScript中，我们可以使用setAttribute()方法来设置元素的某个属性的值。


obj.setAttribute("attr","值")

obj是元素名，attr是属性名。setAttribute()方法有两个参数：第1个参数是属性名；第2个参数是你要设置的属性值。下面两种设置属性值的形式是等价的：


obj.setAttribute("attr","值")
obj.attr = "值";

在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function ()
                oBtn.setAttribute("value", "button");
    </script>
</head>
    <input id="btn" type="button" value="修改" />
</body>
</html>

默认情况下，预览效果如图所示。


当我们点击【修改】按钮之后，预览效果如图所示。


这里我们也可以使用oBtn.value = "button";来代替oBtn.setAttribute("value","button")。同样的，对于自定义属性的值设置，我们也只能用setAttribute()方法来实现。


三、removeAttribute()


在JavaScript中，我们可以使用removeAttribute()方法来删除元素的某个属性。


obj.removeAttribute("attr")

想要删除元素的某个属性，我们只有removeAttribute()这一个方法。此时，使用上一节“对象属性”操作那种方式就无法实现了，因为那种方式没有提供这样的方法。


在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .main{color:red;font-weight:bold;}
    </style>
    <script>
        window.onload = function ()
            var oP = document.getElementsByTagName("p");
            oP[0].onclick = function () 
                oP[0].removeAttribute("class");
    </script>
</head>
    <p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
</body>
</html>

浏览器预览效果如图所示。


这里使用getElementsByTagName()方法来获取p元素，然后为p添加一个点击事件。在点击事件中，我们使用removeAttribute()方法来删除class属性。


removeAttribute()更多情况下是结合class属性来“整体”控制元素的样式属性的，我们再来看一个例子。


在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .main{color:red;font-weight:bold;}
    </style>
    <script>
        window.onload = function ()
            var oP = document.getElementsByTagName("p");
            var oBtnAdd = document.getElementById("btn_add");
            var oBtnRemove = document.getElementById("btn_remove");
            //添加class
            oBtnAdd.onclick = function () {
                oP[0].className = "main";
            //删除class
            oBtnRemove.onclick = function () {
                oP[0].removeAttribute("class");
    </script>
</head>
    <p>你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
    <input id="btn_add" type="button" value="添加样式"/>
    <input id="btn_remove" type="button" value="删除样式"/>
</body>
</html>

浏览器预览效果如图所示。


如果我们用oP[0].className="";来代替oP[0].removeAttribute("class");，效果也是一样的。


想要为一个元素添加一个class（即使不存在class属性），可以使用：


oP[0].className = "main";

想要为一个元素删除一个class，可以使用：


oP[0].className = "";
oP[0].removeAttribute("class");

四、hasAttribute()


在JavaScript中，我们可以使用hasAttribute()方法来判断元素是否含有某个属性。


obj.hasAttribute("attr")

hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。


实际上我们直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。


在线测试
<!DOCTYPE html> 
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .main {color: red;font-weight: bold;}
    </style>
    <script>
        window.onload = function () 
            var oP = document.getElementsByTagName("p");
            if (oP[0].hasAttribute("class"))
                oP[0].onclick = function () 
                    oP[0].removeAttribute("class");
    </script>
</head>
    <p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
</body>
</html>

浏览器预览效果如图所示。


最后，对于操作HTML属性的两种方式，我们来总结一下。


  • （1）“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。
    • 

  • （2）只有“对象方法方式”才可以操作自定义属性。
    • 
                本站所有教程均为原创，大部分已由人民邮电出版社出版成书。禁止转载和抄袭，否则绿叶学习网和人民邮电出版社必将追究法律责任，附录：互联网著作权行政保护法（法律顾问：张俊律师）
                10.1  HTML属性操作（对象属性）
      
     点赞
     
     
     换肤
     
      
    
        请不要重复点赞喔