资讯专栏INFORMATION COLUMN

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

timger / 2052人阅读

摘要:可能在特定的情况下禁用时,我们需要将一个元素的样式发生改变,这时候应该怎么办呢解决方法第一步,给我们当前文档的根节点即元素添加一个代码代码第二步,在我们选择的元素的前面加上表示这是在没有禁用的情况下使用的样式代码在线的展示效果点击这里然

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

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

HTML代码:

html
Hello,World!

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111048.html

相关文章

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

    摘要:可能在特定的情况下禁用时,我们需要将一个元素的样式发生改变,这时候应该怎么办呢解决方法第一步,给我们当前文档的根节点即元素添加一个代码代码第二步,在我们选择的元素的前面加上表示这是在没有禁用的情况下使用的样式代码在线的展示效果点击这里然 可能在特定的情况下(禁用JavaScript时),我们需要将一个元素的样式发生改变,这时候应该怎么办呢? 解决方法: 第一步,给我们当前文档的根节点...

    EddieChan 评论0 收藏0
  • CSS 黑魔法技巧你少写不必要JS,代码更优雅

    摘要:利用用和来做表单即时校验需求让表单检验变得简单优雅,不需要写冗长的代码来校验设置样式丰富了表单元素,提供了类似等表单元素属性。不知细叶谁裁出,二月春风似剪刀。首先,你需要先了解一下渐变的使用技巧。 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑...

    Berwin 评论0 收藏0
  • CSS 黑魔法技巧你少写不必要JS,代码更优雅

    摘要:利用用和来做表单即时校验需求让表单检验变得简单优雅,不需要写冗长的代码来校验设置样式丰富了表单元素,提供了类似等表单元素属性。不知细叶谁裁出,二月春风似剪刀。首先,你需要先了解一下渐变的使用技巧。 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑...

    MASAILA 评论0 收藏0
  • CSS 黑魔法技巧你少写不必要JS,代码更优雅

    摘要:利用用和来做表单即时校验需求让表单检验变得简单优雅,不需要写冗长的代码来校验设置样式丰富了表单元素,提供了类似等表单元素属性。不知细叶谁裁出,二月春风似剪刀。首先,你需要先了解一下渐变的使用技巧。 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑...

    qqlcbb 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<