如何使用 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 将 height: 342px 更改为 372px

Answer 1

在样式表中覆盖内联样式的唯一方法是使用!important规则。

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

也检查这个例子

Answer 2

JSBIN

对 height 属性使用!important来覆盖内联样式并确保使用正确的类名。 element.style 仅适用于 firebug 或开发工具。

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

Answer 3

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

.dhx_view{
  height:374px;
}

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

此外，如果您要为一个元素分配一个 CSS 类，请将所有 CSS 放在那里。 我不会将内联样式与样式表混合使用。 以这种方式维护更容易。

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

所以你的选择是使用没有内联样式的 CSS，或者使用带有!important标志的内联样式。