javascript 我怎么能“关闭”样式表?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5278062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 16:36:59  来源:igfitidea点击:

How could I "turn off" a stylesheet?

javascripthtmlcssaccessibility

提问by Phil

I am creating a website for a University assignment and we have to concentrate on the accessability functions. I have successfully managed to use resize text buttons but am looking for a way to turn off a css file via a button or link.

我正在为大学作业创建一个网站,我们必须专注于可访问性功能。我已经成功地使用调整文本按钮的大小,但我正在寻找一种通过按钮或链接关闭 css 文件的方法。

I have scoured the net and cannot seem to find very much, I found a good website that had the button I am looking for so hit F12 but it would not display the javascript for it.

我已经在网上搜索,似乎找不到太多,我找到了一个很好的网站,它有我正在寻找的按钮,所以按 F12 但它不会显示它的 javascript。

Ideally I would like to achieve it without the use of javascript but if there is no other way then I am open to any help that I can get.

理想情况下,我想在不使用 javascript 的情况下实现它,但如果没有其他方法,那么我愿意接受任何可以获得的帮助。

I am sorry if this is a simple question but I really did look hard for an answer but to no avail, I am only a first year student so have a long way to go!

如果这是一个简单的问题,我很抱歉,但我确实努力寻找答案但无济于事,我只是一年级学生,所以还有很长的路要走!

采纳答案by Albireo

You can do it server side when the user clicks on a "special" link, your server side code simply "skips" the stylesheets elements.

当用户单击“特殊”链接时,您可以在服务器端执行此操作,您的服务器端代码只是“跳过”样式表元素。

回答by John Giotta

This should work

这应该工作

for ( i=0; i<document.styleSheets.length; i++) {
    void(document.styleSheets.item(i).disabled=true);
}

回答by riwalk

Here's a good way to do it quickly from javascript:

这是从 javascript 快速完成的好方法:

  1. Precede all of your CSS rules with the tag body.enabled:

    body.enabled p {
    }
    
    body.enabled #Myselector {
    }
    ...
    
  2. Declare your markup as such:

    ...
    <body class="enabled">
        ...
    </body>
    ...
    
  3. In your JavaScript, when you want to disable CSS, remove the class "enabled"from the <body>and switch it with something else (say, "disabled"). Use whatever methodology you see fit to do this (jQuery would make this easy, but it can be done without)

  1. 在所有 CSS 规则之前加上标签body.enabled

    body.enabled p {
    }
    
    body.enabled #Myselector {
    }
    ...
    
  2. 声明您的标记如下:

    ...
    <body class="enabled">
        ...
    </body>
    ...
    
  3. 在您的 JavaScript 中,当您想要禁用 CSS 时,请"enabled"从 中删除该类<body>并将其切换为其他内容(例如“禁用”)。使用您认为合适的任何方法来执行此操作(jQuery 会使这变得容易,但也可以不这样做)

You're not really disabling CSS using this, you're just making it so that none of it applies. From a user's standpoint, they likely won't know the difference.

你并没有真正禁用 CSS 使用它,你只是让它不适用。从用户的角度来看,他们可能不知道其中的区别。

回答by FelipeAls

Are you trying to mimick every feature already designed in browsers (T+, T-, no CSS)? Were you asked to make an accessible website or specifically to implement accessibility features? I understand this is an assignment but that's quite a waste of time IMHO, a time that would be better spent on implementation of WCAG 2.0 recommendation. (I use the "Accessiweb" methodologya lot).

您是否试图模仿浏览器中已经设计的每个功能(T+、T-、无 CSS)?您是否被要求制作无障碍网站或专门实施无障碍功能?我知道这是一项任务,但恕我直言,这是在浪费时间,最好将时间花在实施 WCAG 2.0 建议上。(我经常使用“Accessiweb”方法)。

My first idea was to deconstruct existing CSS like Universal IE6does for IE6 (you just have to remove the conditional comments and aim to every browser) but @kappa solution seems better as in both cases you must have access to source code.

我的第一个想法是像Universal IE6IE6所做的那样解构现有的 CSS (你只需要删除条件注释并针对每个浏览器)但 @kappa 解决方案似乎更好,因为在这两种情况下你都必须访问源代码。