禁用 Javascript 的 CSS 切换

发布于 2024-12-17 06:59:26 字数 409 浏览 2 评论 0原文

当 Javascript 被禁用时，我在切换 css 时遇到问题。

我有这样的代码：

<style type="text/css">.nonjsonly{display:none;}.jsonly{display:inline;}</style>
<noscript><style type="text/css">.nonjsonly{display:inline}.jsonly{display:none}</style></noscript>

Witch 现在正在工作，但是 W3C 不批准它，因为 noscript 在 html head 中是非法的（并且代码在 head 中）。

知道如何制作吗？

提前致谢

原文

I´m having a problem switching css when Javascript is disabled.

I have this code:

<style type="text/css">.nonjsonly{display:none;}.jsonly{display:inline;}</style>
<noscript><style type="text/css">.nonjsonly{display:inline}.jsonly{display:none}</style></noscript>

Witch is working right now, but W3C doesn´t approve it, as noscript is illegal in html head (And the code is in head).

Any idea how it can be made?

Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゞ记忆︶ㄣ 2024-12-24 06:59:26

处理此问题的更合适方法是首先放置非 js CSS，不带任何标记，然后是为支持 JavaScript 的客户端加载样式表的脚本。然后，支持 JS 的 css 应级联以覆盖基本表。

<style type='text/css'>
  /* baseline CSS for all clients */
</style>

<!-- Then a script loads an additional stylesheet which cascades to override the baseline -->
<!-- Obviously, won't get loaded by noscript clients -->
<script type='text/javascript'>
  document.write("<link type='text/css' rel='stylesheet' href='/path/to/js-friendly.css' />");
</script>

A more appropriate way to handle this is to place your non-js CSS first, without any <noscript> tag, followed by a script which loads a stylesheet for JavaScript-capable clients. The JS-capable css should then cascade to override the basic sheet.

<style type='text/css'>
  /* baseline CSS for all clients */
</style>

<!-- Then a script loads an additional stylesheet which cascades to override the baseline -->
<!-- Obviously, won't get loaded by noscript clients -->
<script type='text/javascript'>
  document.write("<link type='text/css' rel='stylesheet' href='/path/to/js-friendly.css' />");
</script>

回复收藏 0 原文

獨角戲 2024-12-24 06:59:26

将默认的 css 放在第一位：

<style type="text/css" src="default.css" />

这样非 JS 样式适用于所有人。然后使用一些 JS 动态加载“js-enabled”样式：

<script type="text/javascript">
    css = document.createElement('link');
    css.setAttribute('rel', 'stylsheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', 'js-styles.css'); // change as needed
    document.getElementsByTagName('head')[0].appendChild(css);
</script>

这将覆盖非 js 样式。

Put the default css first:

<style type="text/css" src="default.css" />

so the non-JS styles apply to everyone. Then use some JS to dynamically load the "js-enabled" styles:

<script type="text/javascript">
    css = document.createElement('link');
    css.setAttribute('rel', 'stylsheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', 'js-styles.css'); // change as needed
    document.getElementsByTagName('head')[0].appendChild(css);
</script>

which will override the non-js styles.

回复收藏 0 原文

岁吢 2024-12-24 06:59:26

使用 1 个样式表
通过 JavaScript 将 .js 添加到 html 元素
对于需要 JavaScript 的样式，请为选择器添加 .js 前缀

例如：

#foo

变得

.js #foo

更好，使用 Modernizr 来检测更高级的功能（它也会自动添加 .js ）。

Use 1 stylesheet
Add .js to the html element via JavaScript
For styles that require JavaScript, prefix your selector with .js

Ex:

#foo

becomes

.js #foo

Even better, use Modernizr to detect more advanced features (it'll automatically add .js too).

回复收藏 0 原文

苏大泽ㄣ 2024-12-24 06:59:26

您可以执行类似的操作

<script>
    document.getElementsByTagName('body')[0].className += ' jsActive';
</script>

如果 Javascript 可用，，将“jsActive”类写入到 Body 元素中。
您没有“noJavascipt”类，但您可以使用 CSS 选择并构建您的 Funciton

you can do something like this

<script>
    document.getElementsByTagName('body')[0].className += ' jsActive';
</script>

that script write the "jsActive" Class to the Body Element if Javascript is avalible.
You don´t have a "noJavascipt" Class, but you can select with CSS and build you Funcitons

回复收藏 0 原文

~没有更多了~