Question

使用JS检测用户是否已禁用样式表的最佳方法是什么？有可靠的方法吗？

Answer 1

例如，检查身体背景颜色很容易。

但是，有人禁用CSS而不是Javascript的可能性有多大？（不知道你明白用什么）

Answer 2

问他们怎么样？

<div style="display:none">This site relies on CSS, please go to our <a href="noncss.html">CSS free version of this site</a></div>

Answer 3

我会在屏幕上放一个小空的div。页面加载时，使用JS检查该div的'display'属性。如果它是'none'，那么你的css已成功加载。如果没有，他们可能必须关闭/更改你的风格。

Answer 4

如果您控制样式表，则可以使用“校准”样式。有一个将一些CSS属性应用于元素的类名。一个好的跨浏览器安全属性可以是背景色。

加载你的JS时尝试以dinamically方式创建一个元素并将类名应用于它。检查属性是否匹配（元素上的属性与您期望的属性匹配）。

BoltClock的评论很接近。您可以使用window.getComputedStyles(calibrationElement, null)，但在旧的IE浏览器版本中会失败。

请参阅getComputedStyles

的文档

检查完毕后，请随意删除“校准”节点。

Answer 5

假设您的主要外部或内联样式表在脚本之前加载，您可以使用：

if (document.styleSheets.length){} // stylesheets are disabled

https://developer.mozilla.org/en-US/docs/DOM/document.styleSheets

根据http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html

，IE5 +兼容

需要注意的是，如果在加载窗口后关闭样式（仅导致浏览器重绘），则document.styleSheets对象不会即时更改。此外，如下面的评论所述，使用View时这对Firefox不起作用 - ＆gt;页面样式 - ＆gt;没有样式功能，仍然加载了样式，但没有应用于视图。

要检测浏览器的初始状态或window.onresize上的更改，可以在正文上使用style reset进行检索，并在 {{之后放置以下代码1}}或在DOMContentLoaded事件中：

<body>

如果您在样式表中使用if (document.body.clientWidth !== document.documentElement.clientWidth) { // Styles are disabled or not applied }（没有特定的自定义宽度），则此方法有效，因为它使body { margin: 0; }元素的宽度与body相同（又称documentElement样式处于活动状态时。

当关闭或禁用样式时，<hmtl>将恢复为浏览器的默认正文宽度，该宽度始终具有边距（8px by default in CSS 2.1 major browsers），因此与body.clientWidth不同。

如果您的网站设计为身体使用8px以外的特定保证金，则可以选择以下选项：

documentElement.clientWidth

Answer 6

至少在Safari中，部分难点在于关闭CSS元素仍会报告CSS属性。但是，如果你测试一个属性的实际渲染，那么你可以告诉。宽度可能是您可以测试的最简单（也是最常见）的属性。

下面是一个示例脚本（它使用jQuery，但可以轻松地进行非jQueryfied）来测试CSS。我们只是在页面上加载一个空div，使用CSS给它一个3px的宽度，然后测试div的宽度。如果宽度不是3，则禁用CSS。显然你必须确保这与你可能拥有的任何其他样式不一致，这可能导致宽度不是3.但它给出了一般的想法。

<html>
    <head>
        <title>Test</title>
        <style type="text/css">     
            #testCSS {width: 3px;}
        </style>
    </head>
    <body>
        <div id="testCSS"></div>
        <div id="message"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                if (jQuery("#testCSS").width() != 3) jQuery("#message").html("CSS Disabled");
            });
        </script>
    </body>
</html>

编辑：对于凌乱的代码示例感到抱歉。它似乎不喜欢我的代码标签。这是一个带有代码的JSfiddle。显然你将无法禁用CSS并在那里进行测试，但你可以从中提取代码：http://jsfiddle.net/3FvdL/1/

检测何时禁用样式

6 个答案: