如何使用CSS覆盖element.style

Question

我有一个HTML Div标签，如下所示：

<div class="dhx_view" view_id="calendar1" style="border-width: 0px 0px 1px; margin-top: 0px; width: 1562px; height: 342px;">

CSS如下：

element.style {
  border-width: 0px 0px 1px;
  margin-top: 0px;
  width: 1562px;
  **height: 342px;**
}

现在我想使用CSS将高度从342px更改为372px。

- Ravi Varma

---

你必须在属性值后设置 !important，例如 .dhx_view { margin-top: 0 !important; }。 - Milan and Friends

.dhx_view我无法使用它，你能给一个与view_id="calendar1"相结合的组合吗？ - Ravi Varma

Answer 1

您可以使用!important规则来覆盖样式表中的内联样式。

element.style {
  border-width: 0px 0px 1px;
  margin-top: 0px;
  width: 1562px;
  height: 342px !important;
}

同时也查看这个示例

- GreyRoofPigeon

Answer 2

JSBIN

使用!important来覆盖内联样式，确保你使用正确的类名。element.style仅在firebug或dev工具中有效。

.dhx_view {
  background-color: #000;
  border-width: 0px 0px 1px;
  margin-top: 0px;
  width: 1562px;
  height: 372px !important;
}

- Orahmax

Answer 3

您可以简单地添加另一个CSS定义。

.dhx_view{
  height:374px;
}

只要在 HTML 页面中第一个加载的 CSS 定义之后加载此定义，它就会覆盖先前的 CSS 定义。它还将保留该样式中的其他规则，并仅覆盖高度。

另外，如果您要为元素分配 CSS 类，请将所有 CSS 放入其中。我不会将内联样式与样式表混合使用。这样更容易维护。

编辑： 我最初认为 element.style 是您定义的 CSS（重复内联样式），但我认为它可能是参考而不是代码。在这种情况下，您不能只添加另一个 CSS 类来覆盖原始定义，因为 - 如一些人所指出的那样 - 内联样式无法通过 CSS 被覆盖，除非使用 !important 声明。

因此，您的选择是使用没有内联样式的 CSS，或者使用带有 !important 标志的内联样式。

- Dave Mroz

---

.dhx_view我无法使用，你能给一个带有ID的组合吗？ - Ravi Varma

它不会起作用，因为另一个高度是内联指定的，这将覆盖在样式表中定义的所有样式。 - GreyRoofPigeon

你的代码已经在使用它了。如果你想用ID来实现，你需要先给元素分配一个ID，然后将上面的“.”改为“#”。 - Dave Mroz

@LinkinTED - 这就是为什么我建议去除内联样式的原因。 - Dave Mroz

啊...我以为element.style是他除了内联样式之外还在使用的CSS。修改我的回答并点赞你的。 - Dave Mroz