使用CSS覆盖element.style

83

我有一个来自页面构建器的HTML页面，它将style属性直接注入到元素中。我发现它被视为element.style。

我想使用CSS覆盖它。我可以匹配元素，但不会覆盖它。

屏幕截图

如何使用CSS覆盖样式？

css

— DW
source

2

找到样式注入的来源并将其删除？如果它不在您的文档源中，则可能来自某个地方的JavaScript。

— cimmanon

2

您如何找到来源？

— Shailen

2

命令+ shift + f（在Mac上）或ctrl + shift + f（在PC上）

— maahd 2015年

请注意，JS中的替代方法可能是使用来删除添加的属性removeProperty()，即，例如，document.querySelector("li").style.removeProperty("display"); 然后您也不需要提供新的默认值（就像您必须使用!important，但是继承链只是“跳转”。）

— rug

121

尽管它经常被皱眉，但您可以在技术上使用：

display: inline !important;

通常这不是一个好习惯，但在某些情况下可能是必要的。您应该做的是编辑代码，这样一来您就不会在<li>元素上应用样式。

— DiscoInfiltrator
source

17

element.style意味着它位于标记中，因此在您的html中，您会看到<li style="display: none;">

— DiscoInfiltrator

1

在jQuery中，使用show（）方法时，display：block; 应用于元素样式。我希望它可以显示：inline-block; 虽然。我首先通过不使用此方法并使用.css（'display'，'inline-block'）;来解决此问题。代替。但是，阅读此示例后，我想我将改为使用！important。

— 西蒙·本格森

jQuery将display属性设置为所显示元素的默认值。

— 民俗文化

1

从字面上看，当它对我起作用时，我只是惊呼“ gtf outta here”，让我的女朋友不高兴

— jag

2

这些注释中的大多数假定它们可以访问源代码。如果编码人员不发布添加了内联样式的库，则无需执行这些不良做法。

— TallOrderDev

20

该CSS甚至会覆盖JavaScript：

#demofour li[style] {
    display: inline !important;
}

或仅用于第一个

#demofour li[style]:first-child {
    display: inline !important;
}

— 卡尔达里蒙特
source

12

element.style 来自标记。

<li style="display: none;">

只需style从HTML中删除属性即可。

— 艾曼·萨法迪（Ayman Safadi）
source

我没有添加<li style =“ display：none;”>

— DW

它注入了某个地方。我也在寻找它，我认为Google Maps

— 会这样做

1

如果注射的东西比他无法到达自己移除的要多，他必须重写它

— jonyB

5

使用！important将通过CSS（如Change）覆盖element.style

color: #7D7D7D;

至

color: #7D7D7D !important;

那应该做。

— 用户名
source

5

当然，！important技巧在这里起决定性作用，但更具体地定位目标可能不仅有助于实际应用您的替代（权重标准可以统治！important），而且还可以避免覆盖意外的元素。

使用浏览器的开发人员工具，确定令人反感的style属性的确切值；例如：

"font-family: arial, helvetica, sans-serif;"

要么

"display: block;"

然后，决定要覆盖的选择器分支；您可以根据自己的需要扩大或缩小选择范围，例如：

p span

要么

section.article-into.clearfix p span

最后，在您的custom.css中，使用[attribute ^ = value]选择器和！important声明：

p span[style^="font-family: arial"] {
  font-family: "Times New Roman", Times, serif !important;
}

请注意，您不必引用整个样式属性值，仅需明确地匹配字符串即可。

— 埃萨洛斯
source

0

据我所知，首先是Inline sytle，所以CSS类不起作用。

使用Jquery作为

$(document).ready(function(){

   $("#demoFour li").css("display","inline");
  });

You can also try 

#demoFour li { display:inline !important;}

— 用户1990587
source

0

使用JavaScript。

例如：

var elements = document.getElementById("demoFour").getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = "inline";
}

— 久保健太
source

0

您可以通过引用元素样式的有问题的属性来覆盖CSS上的样式。在我的情况下，这两个代码设置为15px，导致我的背景图片变黑。因此，我用0px覆盖了它们，并放置了！important，因此它将成为优先级

.content {
    border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
}

— 特斯拉线圈
source