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

    一、getAttribute()

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

    语法:

    obj.getAttribute("attr")

    说明:

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

    obj.getAttribute("attr") obj.attr

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

    举例:获取固有属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert(oBtn.getAttribute("id")); } } </script> </head> <body> <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> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert(oBtn.data); }; } </script> </head> <body> <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> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { oBtn.setAttribute("value", "button"); }; } </script> </head> <body> <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> <html> <head> <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> <body> <p class="main">你偷走了我的影子,无论你在哪里,我都会一直想着你。</p> </body> </html>

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

    分析:

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

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

    举例:

    <!DOCTYPE html> <html> <head> <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> <body> <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> <html> <head> <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> <body> <p class="main">你偷走了我的影子,无论你在哪里,我都会一直想着你。</p> </body> </html>

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

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

    • (1)“对象属性方式”和“对象方法方式”,这两种方式都不仅可以操作静态HTML的属性,也可以操作动态DOM的属性。
    • (2)只有“对象方法方式”才可以操作自定义属性。