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

Question

I want to be able to remove/change the internal style sheets values through JavasScript. 我希望能够通过JavasScript删除/更改内部样式表的值。 It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. 它必须通过JS，因为我使用的应用程序不允许我编辑html，但是我可以使用JS。 How can I change the value for the background or remove it completely? 如何更改背景值或将其完全删除？ Or is there another way to accomplish this? 还是有另一种方法可以做到这一点？

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

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

Answer 1

If your just going to change small bits of css, using jQuery's css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this: 如果您只想更改少量的CSS，则使用jQuery的css（）是您的最佳选择，但它并不总是能够识别！important，因为您可能需要cssText，如下所示：

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

This replaces all the css, so everything needs to be defined in the new css rules that are added. 这将替换所有css，因此需要在添加的新css规则中定义所有内容。

If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead. 如果您要更改很多CSS，或者只是想使下一次变得更轻松，则可以删除所有内联CSS并添加外部样式表。

To remove all inline styles you would do something like this: 要删除所有内联样式，请执行以下操作：

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

or for div's only 或仅适用于div

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

Depending on how many styles there are, this could take som time to process. 根据有多少种样式，这可能会花费一些时间。

Then to add a new stylesheet 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);
})();

Edit: 编辑：

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

This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference. 这将删除内部样式表中的所有标记，但是由于样式已经加载，因此绝对没有区别。

Internal styles will always override external styles, but for one exeption, if the external style is !important. 内部样式将始终覆盖外部样式，但如果外部样式是！important，则只有一个例子。 If both the external and internal styles are !important, the internal style will be used. 如果外部和内部样式都非常重要，则将使用内部样式。

Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet. 仅当您要覆盖的所有内容都在外部样式表中设置为！important，而在内部样式表中未设置为！important时，才可以使用javascript动态加载外部样式表。

Changing the styles directly in the DOM with jQuery's css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet. 如果绝对没有办法更改html文件并删除内部样式表，则使用jQuery的css（）直接在DOM中更改样式，并使用cssText选项覆盖内部样式表中的！important设置可能是唯一可行的选择。

Answer 2

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

This code will remove the all internal css from the site. 此代码将从站点中删除所有内部CSS。 I used this but style tag will be visible in the page source. 我使用了此样式，但是样式标签将在页面源中可见。

Answer 3

EDIT: OK, now that we understand that this question is really just about how to override the !important style declaration when setting styles via javascript, this is a duplicate of this posting: Overriding !important style . 编辑：好的，现在我们了解到这个问题实际上只是关于在通过javascript设置样式时如何覆盖！important样式声明，这与该文章重复：覆盖！important style 。

The two possible answers there are to set a whole style string on the object or to create a new stylesheet that refers to this object. 有两个可能的答案是在对象上设置整个样式字符串，或创建引用该对象的新样式表。

Previous answer before question was edited: 问题编辑之前的先前答案：

You can just set some style directly on the object if you want like this. 如果需要，您可以直接在对象上直接设置一些样式。 This will override anything that comes from a style sheet so you don't have to mess with the style sheet. 这将覆盖样式表中的所有内容，因此您不必弄乱样式表。

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

or 要么

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

A more extensible way of modifying the look of an object or groups of objects is to based the style settings on class names and then add/remove class names using jQuery. 修改对象或对象组外观的一种更可扩展的方法是，将样式设置基于类名，然后使用jQuery添加/删除类名。 This has the effect of switching which style sheet rules apply to a given object without having to directly manipulate the style sheets themselves: 这具有切换哪些样式表规则应用于给定对象的效果，而不必直接操纵样式表本身：

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

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2011-10-02 01:46:11

解决方案2
0 2018-10-11 17:33:53

解决方案3
0 2011-10-02 00:18:13

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2011-10-02 01:46:11

解决方案2 0 2018-10-11 17:33:53

解决方案3 0 2011-10-02 00:18:13

解决方案1
1 已采纳 2011-10-02 01:46:11

解决方案2
0 2018-10-11 17:33:53

解决方案3
0 2011-10-02 00:18:13