可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

What's the best way to detect, with JS, if the user has disabled your stylesheets? Is there a reliable way even?

回答1:

Something easy would be to check the body background color for instance.

However, how likely is it someone disables CSS and not Javascript? (dunno what you use it for obviously)

回答2:

How about asking them?

<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>

回答3:

I would have a small, empty div sit on the screen. When the page loads, use JS to check the 'display' property of that div. If it's 'none', then your css has successfully been loaded. If not, they may have to turned off / changed your styles.

回答4:

If you're in control of the stylesheet you can have a "calibration" style. Have a classname that applies some CSS property to an element. A good cross-browser safe property can be background-color.

When loading your JS try to dinamically create an element and apply the classname to it. Check if the properties match (the one on the element with the one you're expecting).

BoltClock's comment comes close. You can use window.getComputedStyles(calibrationElement, null) but that will fail in older IE browser versions.

See documentation for getComputedStyles

Feel free to remove the "calibration" node after you've checked it.

回答5:

Assuming your primary external or inline stylesheet is loaded before the script, you can use this:

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

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

It's IE5+ compatible too as per: http://www.jr.pl/www.quirksmode.org/dom/w3c_css.html

The caveat is that, if styles are turned off after the window has loaded (which only causes a browser repaint), the document.styleSheets object won't change on the fly. Additionally, as noted in the comments below, this will not work for Firefox when using the View -> Page Style -> No Style feature, for which styles are still loaded, just not applied to the view.

To detect the initial state across browsers, or changes on window.onresize, it can be done with a style reset on the body, with the following code placed after <body> or in a DOMContentLoaded event:

if (document.body.clientWidth !== document.documentElement.clientWidth) {
  // Styles are disabled or not applied
}

This works if you use body { margin: 0; } in your stylesheets (with no particular custom width), because it makes the body element the same width as documentElement (a.k.a. the <hmtl> element) while styles are active.

When styles are turned off or disabled, the body.clientWidth will revert to the browser's default body width, which always has a margin (8px by default in CSS 2.1 major browsers ) and therefore different from documentElement.clientWidth.

Should your site design use a specific margin other than 8px for the body, here is an alternative option:

if (document.body.clientWidth === document.documentElement.clientWidth-16) {
  // user styles are disabled or not applied (IE8+ default browser style applies)
}

回答6:

At least in Safari, part of the difficulty is that with CSS off the elements still report CSS attributes. But if you test on the actual rendering of a property then you can tell. Width is probably the simplest (and most common) property you can test on.

Below is a sample script (it uses jQuery, but could easily be un-jQueryfied) that will test for CSS. We just load an empty div on the page, give it a width of 3px using CSS, and then test that div's width. If the width is not 3 then CSS is disabled. Obviously you have to make sure that this doesn't colide with any other styles you might have that could cause the width to be other than 3. But it gives the general idea.

<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>

Edit: sorry about the messy code example. It doesn't seem to like my code tags. Here's a JSfiddle with the code. Obviously you won't be able to disable CSS and test there, but you can pull the code from it: http://jsfiddle.net/3FvdL/1/