如何使用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

Answer 1

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

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

同时检查此example

Answer 2

JSBIN

对height属性使用！important 来覆盖内联样式，并确保使用正确的类名。 element.style只能在firebug或dev工具中使用。

.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类，请将所有CSS放在那里。我不会将内联样式与样式表混合使用。保持这种方式更容易。

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

因此，您可以选择使用不带内联样式的CSS，或使用带有!important标记的内联样式。