Question

根据This page我能够删除所有预装的CSS并使用它添加到网页上。我想实现一个按钮系统，其中＆＃34; onclick＆＃34; = 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);

Answer 1

不同的方法怎么样？最初将一个类添加到名为“样式”的主体中，例如

<body class="styled">

将其用作css定义中的主选择器

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

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

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

当班级出现时，页面将被设置样式，当缺席时，将没有样式。

可能会有更好的方法，但这是我脑海里浮现的第一件事

Answer 2

要删除元素上的所有样式，您可以执行

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

Answer 3

如果要在页面上启用/禁用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", "");
    }
});

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

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

Answer 4

看看我把这个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;
}

使用Javascript

4 个答案: