getAttribute setAttribute

最新推荐文章于 2024-03-13 14:17:40 发布

原创最新推荐文章于 2024-03-13 14:17:40 发布 · 245 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

当前文章被收录于：

JavaScript

73 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的DOM操作示例，演示了如何使用JavaScript的getAttribute()和setAttribute()方法来获取和设置HTML元素的属性值。具体来说，通过一个按钮点击事件触发样式更改，实现了元素样式的动态切换。

getAttribute()方法：通过元素节点的属性名称获取属性的值

elementNode.getAttribute(name)

elementNode:使用getElementById、getElementsByTagName()等方法获取到的元素节点；name:要想查询的元素节点的属性名字

setAttribute()方法：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

elementNode.setAttribute(name,value)

name:要设置的属性名;value:要设置的属性值，，如果把指定的属性设置为指定的值，如果不存在具有指定名称的属性，该方法将创建一个新的属性，setAttribute()方法只能通过元素节点对象调用函数

.redStyle{
    width:200px;
    height:100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}

.blueStyle{
    width:200px;
    height:100px;
    background-color: #2f6fad;
    text-align: center;
    line-height: 100px;
}

<div id="id"  class="redStyle">liubbc</div>

<button onclick="changeColor()">change color</button>
<script>

function changeColor() {
    document.getElementById("id").setAttribute("class", "blueStyle");
}

alert(document.getElementById("id").getAttribute("class"));