使用setAttribute()方法修改HTML属性时，该属性的继承性是否会被更新？

我的场景 #

我目前正在为用Publii搭建的网站开发一个半自动多语言系统，现在想根据存在LocalStorage中的变量来更新网站<html>元素的lang属性。我已经在页面body的末尾添加了这段脚本：

<script type="text/javascript" defer> //<![CDATA[    
    const currentLang = localStorage.getItem('存储的语言变量键名');
    // 计划使用setAttribute修改lang属性
    document.documentElement.setAttribute('lang', currentLang);
//]]>
</script>

核心疑问 #

使用setAttribute()方法修改HTML属性时，该属性的继承性是否会被更新？

解答 #

嘿，这个问题我刚好踩过类似的坑！先给你个明确的答案：当你用setAttribute()修改<html>元素的lang这类具有继承性的属性时，它的继承性是会自动同步更新的。

为啥这么说呢？因为<html>是整个DOM树的根节点，它的lang属性本身就是用来给所有子元素提供语言上下文的。浏览器会自动监听根元素的这个属性变化，一旦你用setAttribute()修改了它，所有没有单独设置lang属性的子元素都会自动继承新的语言值——不管是浏览器的拼写检查、屏幕阅读器的语言发音，还是CSS里的:lang()选择器样式，都会跟着切换到新的语言状态。

不过要提醒你两个小细节：

• 如果某个子元素之前被你单独设置了lang属性（比如<p lang="es">Hola</p>），那它不会继承根元素的新值，会一直保留自己的独立设置；
• 其实直接修改DOM属性document.documentElement.lang = currentLang，和用setAttribute()的效果几乎一致，两种方式都会触发继承更新。区别只是前者直接操作DOM对象的属性，后者操作HTML标签上的属性，但对于lang这种标准属性，浏览器会自动同步这两者的状态，不用纠结哪种方式更优。

总的来说，你完全可以放心用setAttribute()来修改根元素的lang属性，子元素的继承会自动更新，不用额外手动处理子元素的属性~

内容来源于stack exchange