小技巧 - 如何做到让一个元素在禁用JavaScript时和启用JavaScript时有不同的样式

2024年5月1日 75次阅读 来源: dreamapplehappy

可能在特定的情况下（禁用JavaScript时），我们需要将一个元素的样式发生改变，这时候应该怎么办呢？
解决方法：

第一步，给我们当前文档的根节点（root）即document.documentElement元素添加一个className

HTML代码：

html<div id="container">
        Hello,World!
</div>

JS代码：

javascript    document.documentElement.className = "js";

第二步，在我们选择的元素的前面加上.js表示这是在没有禁用JavaScript的情况下使用的样式
CSS代码：

css.js #container{
    background-color: black;
    color: white;
}
#container{
    background-color: white;
    color: black;
}

在线的展示效果点击这里
然后你禁用JavaScript看看效果

注：如何禁用JavaScript? F12->Settings->General->Disable JavaScript

    原文作者：dreamapplehappy
    原文地址: https://segmentfault.com/a/1190000002762482
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞