HTML is屬性用法及代碼示例

HTML “is” 是一個全局屬性，允許您指定標準 HTML 元素的行為應類似於定義的自定義內置元素。這意味著隻有在文檔中成功定義了指定的自定義元素名稱時才能使用該屬性。
用法:

<tag is="word-count"></tag>

在這裏，標簽可以是任何 HTML 標簽。

例：下麵的示例將說明 is 屬性是 HTML

HTML


<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green">Geeksforgeeks</h1>
        <strong>HTML is Attribute</strong>
    </center>
  
    <article contenteditable="">
        <h2>Introduction of HTML</h2>
  
        <p>
            HTML stands for HyperText Markup Language.
            It is used to design web pages using a markup
            language. HTML is the combination of Hypertext
            and Markup language. Hypertext defines the link
            between the web pages. A markup language is used
            to define the text document within tag which defines
            the structure of web pages. This language is used to
            annotate (make notes for the computer) text so that
            a machine can understand it and manipulate text accordingly.
            Most markup languages (e.g. HTML) are human-readable.
            The language uses tags to define what manipulation has
            to be done on the text.
        </p>
  
        <p is="word-count"></p>
    </article>
  
    <script>
        class WordCount extends HTMLParagraphElement {
            constructor() {
                super();
  
                const wcParent = this.parentNode;
  
                function countWords(node) {
                    const text = node.innerText || node.textContent;
                    return text.split(/\s+/g).length;
                }
  
                const count = `Words:${countWords(wcParent)}`;
  
                const shadow = this.attachShadow({ mode:'open' });
  
                const text = document.createElement('span');
                text.textContent = count;
  
                shadow.appendChild(text);
                setInterval(function () {
                    const count = `Words:${countWords(wcParent)}`;
                    text.textContent = count;
                }, 200);
            }
        }
  
        customElements.define('word-count',
            WordCount, { extends:'p' });
    </script>
</body>
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器
Firefox
safari
Opera

相關用法

注：本文由純淨天空篩選整理自skyridetim大神的英文原創作品 HTML is Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。