覆盖 !important 风格

IT技术 javascript css
2021-01-13 21:15:48

标题几乎总结了它。

外部样式表具有以下代码:

td.EvenRow a {
  display: none !important;
}

我试过使用:

element.style.display = "inline";

element.style.display = "inline !important";

但两者都不起作用。是否可以使用 javascript 覆盖 !important 样式。

这是一个greasemonkey 扩展,如果这有区别的话。

6个回答

您可以使用几个简单的单线来执行此操作。

  1. 在元素上设置“样式”属性

    element.setAttribute('style', 'display:inline !important');

或者...

  1. 修改对象cssText属性style

    element.style.cssText = 'display:inline !important';

要么会做这项工作。

===

我编写了一个名为“重要”的 jQuery 插件来操作!important元素中的规则,:http : //github.com/premasagar/important

===

编辑:正如评论中所分享的,标准 CSSOM 接口(用于与 CSS 交互的 JavaScript 的 API)提供了setProperty方法:

element.style.setProperty(propertyName, value, priority);

例如:

document.body.style.setProperty('background-color', 'red', 'important');
是的,我知道 - 我将您的答案与@JP 的选定答案进行了比较,并且我试图说我认为您的答案更好。
2021-03-15 21:15:48
为了防止覆盖其他属性,你想使用 element.style.cssText += ';display:inline !important;';
2021-03-16 21:15:48
@Guss - 我给出的第一个例子是一个style属性,而不是一个标签/元素。
2021-03-26 21:15:48
@user123444555621,Premasagar。不妨使用更好的选择:element.style.setProperty.
2021-03-31 21:15:48
我认为使用 cssText 比添加style标签更简单
2021-04-01 21:15:48

element.style有一个setProperty方法可以将优先级作为第三个参数:

element.style.setProperty("display", "inline", "important")

在旧 IE 中不起作用,但在当前浏览器中应该没问题

@Pavan 使用带连字符的形式很容易,或者如果您需要自动转换它,只需编写一个函数即可。
2021-03-16 21:15:48
最佳解决方案,因为它不会覆盖整个样式属性,并且是 W3C 的工作方式。
2021-03-25 21:15:48
它的缺点是我不能在camelCase中使用属性名称 boxShadow
2021-04-04 21:15:48

我相信唯一的方法是将样式添加为带有 '!important' 后缀的新 CSS 声明。最简单的方法是在文档的头部附加一个新的 <style> 元素:

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('td.EvenRow a {display:inline !important;}')

使用上述方法添加的规则(如果您使用 !important 后缀)将覆盖其他先前设置的样式。如果您不使用后缀,请确保将“特殊性等概念考虑在内。

这可以用单线代替。见下文:stackoverflow.com/questions/462537/...
2021-03-14 21:15:48
你将如何找到实际触发样式的选择器?我认为这需要解析所有样式表,这是一项非常艰巨的工作。
2021-03-22 21:15:48

以@Premasagar 的出色回答为基础;如果您不想删除所有其他内联样式,请使用此

//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

无法使用,removeProperty()因为它不会删除!importantChrome中的规则。
无法使用,element.style[property] = ''因为它在 FireFox 中只接受驼峰式大小写。

不妨使用更好的选择:element.style.setProperty.
2021-03-28 21:15:48

如果要在 DOM 元素样式属性中更新/添加单个样式,可以使用此功能:

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}

style.cssText支持所有主流浏览器

用例示例:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

这是演示的链接

此答案提供了哪些额外信息或改进?
2021-03-12 21:15:48
此功能简短、简单且易于理解。您可以添加重要选项。它不会删除所有元素样式。它在元素样式属性中覆盖或添加单个样式。您不需要任何 JS 框架。最重要的是,此功能适用于每个浏览器。
2021-04-09 21:15:48