Question

我希望能够通过JavasScript删除/更改内部样式表值。它必须通过JS，因为我不能编辑html，因为我使用的是不允许我的应用程序，但我可以使用JS。如何更改背景值或将其完全删除？或者还有另一种方法来实现这一目标吗？

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

<div id="company-header"></div>
</body>

Answer 1

如果你要改变一小部分css，使用jQuery的css（）是你最好的选择，但它并不总是认识！重要的是，你可能需要cssText，如下所示：

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

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

如果您要更改大量css，或者只是想让下次更容易，则可以删除所有内联css并添加外部样式表。

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

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

或仅限div

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

根据有多少款式，这可能需要一段时间来处理。

然后添加新样式表：

(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(); });

这将删除内部样式表中的所有标记，但由于样式已经加载，因此完全没有区别。

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

使用javascript动态加载外部样式表只有在您尝试覆盖的所有内容在外部样式表中设置为！important并且在内部样式表中未设置为！important时才会起作用。

使用jQuery的css（）直接在DOM中更改样式并使用cssText选项覆盖内部样式表中的！important设置可能是唯一可行的选项，如果绝对无法更改html文件并删除内部样式表。

Answer 2

编辑：好的，现在我们知道这个问题实际上只是关于如何在通过javascript设置样式时覆盖！important样式声明，这与此帖子重复：{{3 }}

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

编辑之前的回答：

如果你想这样，你可以直接在对象上设置一些样式。这将覆盖来自样式表的任何内容，因此您不必弄乱样式表。

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

或

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

修改对象或对象组外观的更可扩展的方法是基于类名称的样式设置，然后使用jQuery添加/删除类名称。这样可以切换哪种样式表规则适用于给定对象，而无需直接操作样式表本身：

$("#company-header").removeClass("oldClass").addClass("newClass");

Answer 3

$(document).ready(function(){
        $('style').remove();
    });

此代码将从网站中删除所有内部CSS。我使用了此样式，但是样式标签将在页面源中可见。

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

3 个答案: