使用 Javascript 在网页上禁用/启用 CSS答案

【问题标题】：Disable/Enable CSS on webpage using Javascript使用 Javascript 在网页上禁用/启用 CSS
【发布时间】：2015-10-27 07:39:12
【问题描述】：

根据This page，我能够使用它删除所有预加载并添加到网页上的 CSS。我想实现一个按钮系统，其中“onclick”=enable/disable 网页 CSS 甚至是我的网络主机预加载的那些。我想消除样式标签以防止我的网站用户滞后。我更喜欢使用上面链接的脚本，除非有另一种效果更好的替代方法。是否可以启用 CSS onclick 相同的按钮来禁用？如果没有，是否有可能，可以这么快完成吗？下面是首选脚本的示例：

if (disable) {
style = "disable";
} else {
location.reload();
}

首选脚本：

function removeStyles(el) {
  el.removeAttribute('style');

  if(el.childNodes.length > 0) {
    for(var child in el.childNodes) {
        /* filter element nodes only */
        if(el.childNodes[child].nodeType == 1)
            removeStyles(el.childNodes[child]);
    }
  }
}

removeStyles(document.body);

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果您想启用/禁用页面上的 CSS，那么目标不仅仅是删除页面上的所有样式，还需要将它们保存在某个地方，以便用户重新调用它们时可以调用它们单击按钮。我建议使用 jQuery 来帮助您解决此问题，可以通过以下方式完成：

var style_nodes = $('link[rel="stylesheet"], style');
style_nodes.remove();

$('*').each(function(num, obj) {
    var style_string = $(obj).attr("style");
    if (style_string) {
        $(obj).data("style-string", style_string);
        $(obj).attr("style", "");
    }
});

现在您已将样式表和样式 DOM 节点保存在 style_nodes 中，并将实际的 style 属性保存在该特定 DOM 节点的 jQuery 数据属性中。当您单击将 CSS 添加回页面时，您可以执行以下操作：

$('head').append(style_nodes);
$('*').each(function(num, obj) {
    if ($(obj).data("style-string"))
        $(obj).attr("style", $(obj).data("style-string"));
});

【讨论】：

我正要写类似的东西......但你拯救了我的努力:)
@jason 对不起，我对 jQuery 的了解非常有限，所以我想知道，如何使用您的脚本设置类似 jsfiddle.net/5krLn3w1 的东西？

【解决方案2】：

查看我整理的这个 JS Fiddle 来演示它： https://jsfiddle.net/5krLn3w1/

使用 JQuery，但我相信大多数框架都应该为您提供类似的功能。

HTML：

<h1>Hello World</h1>
<a href="#" id="turn_off">Turn off CSS</a>
<a href="#" id="turn_on">Turn on CSS</a>

JS：

$(document).ready(function() {
    $('a#turn_off').click(function(evt) {
        evt.preventDefault();
        var css = $('head').find('style[type="text/css"]').add('link[rel="stylesheet"]');
        $('head').data('css', css);
        css.remove();
    });

    $('a#turn_on').click(function(evt) {
        evt.preventDefault();
        var css = $('head').data('css');
        console.info(css);
        if (css) {
            $('head').append(css); 
        }
    });
});

CSS：

body {
    color: #00F;
}

h1 {
    font-size: 50px;
}

【讨论】：

【解决方案3】：

另外一种方法呢？例如，最初将一个类添加到名为“styled”的主体中

<body class="styled">

在你的 CSS 定义中使用它作为主要选择器

<style>
    .styled a { ... }
    .styled h1 { .... }
</style>

然后是一个用于切换类的示例 jquery 脚本：

<script>
    $(function() {
      $('#myswitch').click(function() {
         $('body').toggleClass('styled');
      });
    });
</script>

当类存在时，页面将被设置样式，当不存在时，页面将没有样式。

当然可以有更好的方法，但这是我脑海中突然出现的第一件事

【讨论】：

又好又简单！ ...唯一的缺点是如果他无法控制样式，因为它们是由其他东西插入的（提到的 OP 是由网络主机预加载的？）
是的，这是一个很好的说明...剥离初始内联 css 不是问题，但除非执行重新加载，否则将其返回不是一个简单的任务

【解决方案4】：

要删除元素上的所有样式，您可以这样做

function removeStyles(el) {
  el.style = {};
}

【讨论】：