HTML - DOM Document createAttribute() 方法

HTML DOM document createAttribute() 方法用于使用 JavaScript 为 HTML 元素创建具有特定名称的属性，并返回 Attr 对象。

语法

document.createAttribute(name);

参数

它接受一个必需的参数，如下所示。

参数	描述
name	它表示要创建的属性的名称。对于无效名称，它会抛出 InvalidCharacterError。无效名称包括以数字、连字符开头或包含除字母数字字符、下划线、连字符或句点之外的其他字符。

返回值

它返回使用 createAttribute() 方法创建的节点。

HTML DOM Document 'createAttribute()' 方法示例

以下是一些说明 createAttribute() 方法用法的示例。

向锚点标签添加 href

在以下示例中，href 添加到锚点标签。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML DOM Document createAttribute() Method</title>
</head>
<body>
    <h3>HTML DOM Document createAttribute() Method</h3>
    <a id="attr">Welcome to TutorialsPoint</a>
    <br>
    <button onclick="fun()">Click me</button>
    <script>
        function fun(){
            let x=document.createAttribute("href");
            x.value="https://tutorialspoint.com/index.htm"
            document.getElementById("attr").setAttributeNode(x);
        }
    </script>
</body>
</html>

向段落添加类

在以下示例中，我们创建了一个类并将其添加到一个 <p> 以更改文本的字体颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Document createAttribute() Method</title>
    <style>
        .classone {
            color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>HTML DOM Document createAttribute() Method</h3>
    <p id="attr">Welcome to TutorialsPoint</p><br>
    <button onclick="fun()">Click me</button>
    <script>
        function fun() {
            let x = document.createAttribute("class");
            x.value = "classone"
            document.getElementById("attr").setAttributeNode(x);
        }
    </script>
</body>
</html>

向段落添加样式

在以下示例中，我们向一个 <p> 添加了样式以更改文本的字体颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Document createAttribute() Method</title>
    <style>
        .classone {
            color: #04af2f;
        }
    </style>
</head>
<body>
    <h3>HTML DOM Document createAttribute() Method</h3>
    <p id="attr">Welcome to TutorialsPoint</p><br>
    <button onclick="fun()">Click me</button>
    <script>
        function fun() {
            let x = document.createAttribute("style");
            x.value = "color :#04af2f";
            document.getElementById("attr").setAttributeNode(x);
        }
    </script>
</body>
</html>

支持的浏览器

方法
createAttribute()	是 1	是 12	是 44	是 1	是 12.1

打印页面