如果未启用javascript，请定义css

Question

如果未启用javascript，我想定义.exampleclass img {height:250px}。他们无论如何要在javascript / jquery中撤消这个？

Answer 1

您可以使用HTML的noscript标记。

<noscript>
    <style type="text/css">
        .exampleclass img {height:250px}
    </style>
</noscript>

---

编辑：我实际上会把斯蒂芬的回答视为最好的。虽然上述方法可能有效，但可能无效/遵循最佳做法。

斯蒂芬回答说：

  

在你的body元素上放一个“no-js”类，然后在加载时用JS删除它，并在CSS的选择器中使用.no-js

该类也可以放在您的html元素上，然后在JavaScript不可用时应该出现的所有样式都可以在选择器之前以html.no-js为前缀。这就是HTML5 Boiler Plate所做的事情。例如。

Answer 2

在你的body元素上放一个“no-js”类，然后在加载时用JS删除它，并在CSS的选择器中使用.no-js

Answer 3

尝试

<noscript>
    <style type="text/css">
        .exampleclass img {height:250px}
    </style>
</noscript>

Noscript

Answer 4

最好不要以这种方式通过JS搞乱CSS。试试这个：

<noscript>

    <link href="no-js.css" type="text/css" rel="stylesheet" />

</noscript>

Answer 5

我使用这样的东西......

的JavaScript

document.body.className += ' javascript';

的jQuery

$('body').addClass('javascript');

CSS

.exampleclass img {height: 250px}

.javascript .exampleclass img {height: 500px}

Answer 6

有一天我们可能会有这个

在Chrome 83 Win10中当前不活动

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/scripting

p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}

<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">Your scripting is only enabled during the initial page load. Weird.</p>
<p class="script-enabled">You have scripting enabled! :-)</p>

Answer 7

最优雅的方法是在CSS中使用：

.exampleclass img {height:250px}
.js .exampleclass img {height:auto;}

并在你的JS中：

var dd = document.documentElement;
dd.className += ((dd.className == "") ? "js" : " js");

以便在启用JS的情况下第二个CSS规则将覆盖第一个CSS规则

Answer 8

将来（如果以及当浏览器开始支持它的时候），可以使用scripting CSS media feature：

@media (scripting: none) {
  // Styles to apply if JS is disabled
}