在使用Javascript的网页上禁用/启用CSS

Disable/Enable CSS on webpage using Javascript

本文关键字：启用 CSS 网页 Javascript      更新时间：2023-09-26

根据这个页面，我能够删除所有的CSS预加载和添加到网页上使用。我想实现一个按钮系统，其中"onclick"= enable/disable网页CSS，甚至是我的web主机预加载的。我想消除样式标签，以防止我的网站用户滞后。我更喜欢使用我上面链接的脚本，除非有另一个更好的选择。是否有可能启用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);

换个方法怎么样?首先添加一个名为'styled'的类到body中，例如

<body class="styled">

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

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

，然后是一个示例jquery脚本切换类:

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

当class存在时，页面将被样式化，当class不存在时，页面将不被样式化。

当然可以有更好的方法，但这是我首先想到的

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

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

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

看看这个我放在一起演示的JS提琴: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;
}
相关文章：