HTML - DOM 元素 lang 属性

**lang** 属性是 HTML 元素的一个属性，用于指定语言代码，例如英语为 'en'，法语为 'fr'，表示该元素内内容的语言。

语法

设置 lang 属性

element.lang = lang_code;

获取 lang 属性

element.lang

属性值

值	描述
lang_code	元素内内容的语言。

返回值

此属性返回一个字符串，包含元素 lang 属性的值。

HTML DOM 元素 'lang' 属性示例

以下是一些示例，展示了 'lang' 属性的各种用法，以便更好地理解。

访问和显示 Lang 属性

此示例显示了 lang 属性的用法，用于访问和显示元素的语言属性。当我们点击“显示 Lang 属性”按钮时，它会显示应用于**<p>**元素的 'lang'（语言）属性的值。

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>HTML - DOM Element</h1>
    <h2>lang Property Example</h2> 
    <p id="ex" lang="en">This paragraph is in English.</p>
    <button onclick="displayLangAttribute()">
        Display Lang Attribute
    </button>

    <div id="output"></div>

    <script>
        function displayLangAttribute() {
            const paragraph = document.getElementById('ex');
            const langAttribute = paragraph.lang;

            const res = 
            `<p>Lang Attribute Value: ${langAttribute}</p>`;
            document.getElementById('output').innerHTML = res;
        }
    </script>
</body>

</html>

在各个部分显示 'lang' 属性

此示例显示了 lang 属性的用法，用于访问和显示文档中不同部分的语言属性。当我们点击“显示 Lang 属性”按钮时，它会显示应用于 ID 为 'exampleDIv' 的**<div>**元素的 ID 和 'lang'（语言）属性。

<!DOCTYPE html>
<html lang="en">

<body>
    <h1>HTML - DOM Element</h1>
    <h2>lang Property Example</h2>
    <p>It displays the 'lang' attribute for both 
        english and France paragraphs.
    </p>
    <article id="article1" lang="en">
    <h2 lang="en">Introduction</h2>
    <p lang="en">
        This is the introduction paragraph in English.
    </p>
    </article>

    <article id="article2" lang="fr">
    <h2 lang="fr">Introduction</h2>
    <p lang="fr">
        Ceci est le paragraphe d'introduction en français.
    </p>
    </article>

    <button onclick="displayLangAttributes()">
        Display Lang Attributes
    </button>

    <div id="ot"></div>

    <script>
        function displayLangAttributes() {
            const art=document.querySelectorAll('article');

            let res="<p><b>Lang Attributes:</b></p>";
            art.forEach(article => {
            const articleId = article.id;
            const articleLang = article.lang;
            res+=`<p>${articleId}-Lang:${articleLang}</p>`;
            });

            document.getElementById('ot').innerHTML =res;
        }
    </script>
</body>

</html>

支持的浏览器

属性
lang	是	是	是	是	是

html_dom_element_reference.htm

打印页面