改变某个元素属性值的方法

最新推荐文章于 2025-02-17 14:03:35 发布

原创最新推荐文章于 2025-02-17 14:03:35 发布 · 6.7k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了两种修改HTML元素属性值的方法：使用element.value和setAttribute()方法，并通过实例展示了如何更改图片源和div元素的ID及类名。推荐使用setAttribute()方法，因为它提供了更好的DOM可移植性和兼容性。

第一种：

element.value = "this new value";

第二种：

element.setAttribute("value","the new value");

案例一：

    <!-- 改变某个元素属性值的方法 -->
<img id="targetPic" src="images/coffice.jpg" alt="">

<script>
    var targetPic = document.getElementById("targetPic");

    // 使用 element.value方法实现

    targetPic.src = "images/apple.jpg";

    // 使用 setAttribute()方法来实现

    targetPic.setAttribute("src","images/huawei.jpg");
</script>

案例二：

<div id="textDiv" class="textDiv">修改DIV元素的属性值</div>
<script>
    var textDiv = document.getElementById("textDiv");

    textDiv.setAttribute("id","goalDiv");

    textDiv.setAttribute("class","targetDiv");

</script>

推荐使用第二种，即setAttribute()方法，使用此方法的优势在于它可以修改文档中的任何一个元素的任何一个属性。比如 value、placeholder、title、id、class…的属性值。另一种优势是DOM的可移植性更好。因为DOM是一种适用于多种环境和多种程序设计语言的通用型API,能够避免与兼容性有关的任何问题。