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	是	是	是	是	是

列印頁面