Question

我的目标是拥有一个按钮（由javascript函数控制），可以打开和关闭网站上的整个CSS。我认为这是一种常见的做法，当我在这里或网上找不到完整的解决方案时，我感到很惊讶。

这是我得到的。

$("#button").click(function() {
    var css = (document.styleSheets[0].enabled = true);
    if (css == true)
    {
        document.styleSheets[0].disabled = true;
        css =  (document.styleSheets[0].enabled = false);
    }
    else if (css == false)
    {
        document.styleSheets[0].disabled = false;
    }   
});

一个简单的Jquery函数，它按ID定位按钮并执行if测试。我可以省略变量，但这样我可以在console.log中轻松检查值。我能够关闭CSS ，但不能上的。该计划甚至没有达到其他条件。我知道 else if 不是真的合适，但是就其他问题（甚至只是另一个条件），该函数根本不运行。

我想到的第二个选项，可能更容易的只是动态更改链接 href 属性的内容，其中css文件的路径是给出。但是我很难用Javascript来定位 href 元素。

Answer 1

这是一个简单的布尔切换，因此将其写为简单的切换

$("#button").click(function() {
    var sheet = document.styleSheets[0];
    sheet.disabled = !sheet.disabled;
});

至于为什么你的代码没有按原样运作，

var css = (document.styleSheets[0].enabled = true);
// same as
var css;
document.styleSheets[0].enabled = true;
css = true;

表示

if (css == true)
// same as
if (true == true)

始终保持

，因此您始终遵循此代码路径

Answer 2

你的问题是你在做同等检查时正在做作业。

你有

def parse_dir_contents(self, response):
 for i in response.xpath('//*[@class="disco_release"]/div[3]'):
    item['average rating']=i.xpath('text()').extract()
    yield item

但你真的想做一个平等检查，即

var css = (document.styleSheets[0].enabled = true);

注意额外的var css = (document.styleSheets[0].enabled == true);。单=执行赋值，因此您当前的代码与此相同：

由于您将启用设置为document.styleSheets[0].enabled = true var css = document.styleSheets[0].enabled; // i.e., true，因此您的true条件始终满足，因此您的代码始终会关闭CSS并且永远不会将其重新打开。

正如Paul S.在答案中所写的那样，修正案只是为了切换if (css == true)的价值，如：

document.styleSheets[0].disabled

无需设置和跟踪新属性$("#button").click(function() { document.styleSheets[0].disabled = !document.styleSheets[0].disabled; });。

Answer 3

嗯，对于一个你需要循环遍历所有样式表。

此外，您可以使用计数器保存一些代码行，然后在每个按钮上单击增加计数器并使用%模运算符将其转换为1或0，然后您可以强制执行使用!!的布尔值。

var count = 0;
var sheets = document.styleSheets;

$("#button").click(function() {
    for(var i in Object.keys(sheets)) sheets[i].disabled = !!(++count % 2);
});

.demo {
  background: #888;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">Some Text</div>
<button id="button">Click It</button>

Answer 4

问题似乎是你在这一行做分配而不是比较：

var css = (document.styleSheets[0].enabled = true);

应该是

var css = (document.styleSheets[0].enabled == true);

可能更简单一点，因为你在问题上有一个jquery标记，只是这样做：

$stylesheets = $('link[rel="stylesheet"]');
$("#button").click(function() {
    $stylesheets.attr('disabled', !$stylesheets.attr('disabled'));
});

Answer 5

如果要修改DOM中的每个href，

只需使用

 $('a[href*=]').each(function () {
                var $this = $(this);
                $this.attr('href', $this.attr('href').replace();
            });

全局打开/关闭CSS

5 个答案: