javascript中setAttribute()函数使用方法及兼容性

下面是关于JavaScript中setAttribute()函数的使用方法及兼容性的完整攻略：

一、语法概述

setAttribute()函数是一种在HTML和XML文档中设置属性的方法。它有两个参数：

• 属性名：要设置的属性名称
• 属性值：要设置的属性值

使用语法如下所示：

element.setAttribute(attributeName, attributeValue);

其中，element代表想要设置属性的元素对象，attributeName代表属性名称，attributeValue代表属性值。

二、用途概述

使用setAttribute()函数来动态地给HTML元素添加属性，也可以使用它来修改或更新HTML元素的现有属性。它还可以用于在JavaScript中创建新的HTML元素。

三、兼容性问题

大多数现代浏览器都支持使用setAttribute()函数。但是，有些旧版本的Internet Explorer（如IE6，IE7和IE8）及一些移动浏览器可能不支持该函数。

四、使用示例

示例一：

在HTML文档中添加一个id为"sample"的div元素，并为其添加一个class为"box"的样式类：

<div id="sample"></div>

var sampleDiv = document.getElementById("sample");
sampleDiv.setAttribute("class", "box");

示例二：

用JavaScript动态地创建一个img元素，设置它的src属性为"http://example.com/img.jpg"，宽度为200px，高度为150px：

var imgElement = document.createElement("img");
imgElement.setAttribute("src", "http://example.com/img.jpg");
imgElement.setAttribute("width", "200");
imgElement.setAttribute("height", "150");

document.body.appendChild(imgElement);

以上示例代码可以实现将创建的img元素添加到文档的body标签中。

五、总结

如果你需要在JavaScript中动态修改或者添加HTML元素的属性，setAttribute()函数是一个非常实用的工具。通过本篇攻略，你应该知道如何使用该函数及其兼容性问题，以便顺利地在你的项目中使用。