HTML - DOM 属性指定的属性

HTML DOM 属性的 **specified** 属性用于检查是否指定了提到的属性。如果指定了提到的属性，则返回 true，否则会抛出错误。

语法

attribute.specified

返回值

如果在该标签中提到了该属性，则 `specified` 属性返回 true，否则程序停止运行。

HTML DOM 属性“specified”属性的示例

以下示例说明如何在 JavaScript 和 HTML 中使用 `specified` 属性。

检查是否指定了 onclick 属性

以下代码演示了如何使用 `specified` 属性来检查 HTML 元素的属性是否被显式指定。

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="Div" 
         style="background-color:blue;height:50px"
         onclick="">
    </div>
    <p>Is the onclick attribute specified?</p>
    <p id="par"></p>
    <script>
        document.getElementById("par").innerHTML =
        document.getElementById("Div").getAttributeNode("onclick").specified;
    </script>
</body>

</html>

未提及属性时使程序崩溃

以下代码显示了当我们尝试检查不存在的属性的存在时会发生什么。它在显示两个结果后崩溃。

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="TestDiv"
             style="background-color:red;height:50px"
             onclick="">
    </div>
    <p>
        Are the following attributes specified for 
        the element?
    </p>
    <p id="onclickResult"></p>
    <p id="idResult"></p>
    <p id="classResult"></p>
    <p id="styleResult"></p>
    <script>
        var element = document.getElementById("TestDiv");

        // Check if the 'onclick' attribute is specified
        document.getElementById("onclickResult").innerHTML
        = "onclick: " + 
        element.getAttributeNode("onclick").specified;

        // Check if the 'id' attribute is specified
        document.getElementById("idResult").innerHTML
        = "id: " + 
        element.getAttributeNode("id").specified;

        // Check if the 'class' attribute is specified
        // We didnt mentioned class attribute for div 
        // tag, hence program crashes here, you can't.
        // see result of class and style attributes.
        document.getElementById("classResult").innerHTML
        = "class: " + 
        element.getAttributeNode("class").specified;

        // Check if the 'style' attribute is specified
        document.getElementById("styleResult").innerHTML
        = "style: " + 
        element.getAttributeNode("style").specified;
    </script>
</body>

</html>

处理程序崩溃

在这里，我们将了解如何处理程序崩溃。在尝试使用三元运算符访问 specified 属性之前，我们将检查属性是否存在。

<!DOCTYPE html>
<html>

<head>
    <title>HTML DOM Attribute specified Property</title>
</head>

<body>
    <h3>HTML DOM Attribute specified Property</h3>
    <div id="TestDiv"
             style="background-color:red;height:50px"
             onclick="">
    </div>
    <p>
        Are the following attributes specified for 
        the element?
    </p>
    <p id="onclickResult"></p>
    <p id="idResult"></p>
    <p id="classResult"></p>
    <p id="styleResult"></p>
    <script>
        var element = document.getElementById("TestDiv");

        // Check if the 'onclick' attribute is specified
        var onclickAttr = element.getAttributeNode("onclick");
        document.getElementById("onclickResult").innerHTML
        = "onclick: " + (onclickAttr ? onclickAttr.specified : false);

        // Check if the 'id' attribute is specified
        var idAttr = element.getAttributeNode("id");
        document.getElementById("idResult").innerHTML
        = "id: " + (idAttr ? idAttr.specified : false);

        // Check if the 'class' attribute is specified
        var classAttr = element.getAttributeNode("class");
        document.getElementById("classResult").innerHTML
        = "class: " + (classAttr ? classAttr.specified : false);

        // Check if the 'style' attribute is specified
        var styleAttr = element.getAttributeNode("style");
        document.getElementById("styleResult").innerHTML
        = "style: " + (styleAttr ? styleAttr.specified : false);
    </script>
</body>

</html>

支持的浏览器

属性
specified	是	是	是	是	是

打印页面