使用JavaScript/jQuery删除/更改内部样式表样式



我希望能够通过JavasScript删除/更改内部样式表值。它必须通过JS,因为我不能编辑html,因为我使用的应用程序不允许我编辑,但我可以使用JS。如何更改背景值或将其完全删除?或者还有其他方法可以做到这一点吗?

<body>
<head>
  <style type="text/css">
  #company-header{background:#000 !important;}
  </style>
</head>
<div id="company-header"></div>
</body>

如果你只是想更改css的小部分,使用jQuery的css((是最好的选择,但它并不总是能识别!重要的是,为此您可能需要cssText,如下所示:

$('#id').css('cssText', 'height: 200px !important');

这将替换所有css,因此需要在添加的新css规则中定义所有内容。

如果您正在更改大量css,或者只是想让它在下一次更容易,您可以删除所有内联css,并添加一个外部样式表。

要删除所有内联样式,您可以执行以下操作:

$(document).removeAttr('style');

或用于div的唯一

$('div').removeAttr('style');

根据有多少样式,这可能需要一些时间来处理。

然后添加一个新的样式表do:

(function() {
    var myCSS = document.createElement('link');
    myCSS.rel = 'stylesheet';
    myCSS.type = 'text/css';
    myCSS.src = '/styles/mystylesheet.css';
    var place = document.getElementsByTagName('script')[0];
    place.parentNode.insertBefore(myCSS, place);
})();

编辑:

function removeCSS() {
    var badCSS = document.getElementsByTagName('style')[0];
        $(badCSS).remove();     
});

这将删除内部样式表中的所有标记,但由于样式已经加载,因此绝对不会有任何区别。

内部样式将始终覆盖外部样式,但对于一个例外,如果外部样式是!重要的如果外部和内部样式都是!重要的是,将使用内部样式。

只有当您试图覆盖的所有内容都设置为时,才可以使用javascript动态加载外部样式表!在外部样式表中很重要,而不是设置为!在内部样式表中很重要。

使用jQuery的css((直接在DOM中更改样式,并使用cssText选项覆盖!如果绝对无法更改html文件并删除内部样式表,那么内部样式表中的重要集合可能是唯一可行的选项。

编辑:好了,现在我们明白了这个问题实际上只是关于如何覆盖!通过javascript设置样式时的重要样式声明,这是本文的重复:重写!重要风格。

两个可能的答案是在对象上设置一个完整的样式字符串,或者创建一个引用该对象的新样式表。


问题编辑前的上一个答案:

如果你想这样的话,你可以直接在对象上设置一些样式。这将覆盖来自样式表的任何内容,这样您就不必破坏样式表。

$("#company-header").css("background-color", "#FFFFFF");

$("#company-header").css("background", "none");

修改对象或对象组外观的一种更具扩展性的方法是基于类名进行样式设置,然后使用jQuery添加/删除类名。这具有切换样式表规则应用于给定对象的效果,而不必直接操作样式表本身:

$("#company-header").removeClass("oldClass").addClass("newClass");
$(document).ready(function(){
        $('style').remove();
    });

此代码将从网站中删除所有内部css。我使用了这个,但样式标记将在页面源中可见。

最新更新