CODEWITHSUNDEEP
htmlcss
Ravi Varma
Ravi Varma

Reputation: 131

how to override the element.style using css

I have HTML Div tag as follows

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

CSS as follows:

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

Now I want to change the height: 342px to 372px using CSS

Upvotes: 3

Views: 16945

Answers (3)

Dave Mroz
Dave Mroz

Reputation: 1489

You can simply add another CSS definition.

.dhx_view{
  height:374px;
}

This will override the previous CSS definition as long as it is loaded after the first in the HTML page. It will also keep the other rules in that style and just override the height.

Also, if you're going to assign a CSS class to an element, put all of the CSS in there. I wouldn't mix inline styles with stylesheets. It's just easier to maintain that way.

Edit: I originally thought that the element.style was CSS that you had defined [which repeats the inline styles] but I think it may for reference and not code. In that case, you can't just add another CSS class to override the original definition because - as a few people pointed out - the inline styles can't be overwritten by CSS, without using the !important declaration.

So your options are to use CSS without inline styles, or use inline styles with the !important flag.

Upvotes: 0

Orahmax
Orahmax

Reputation: 2341

JSBIN

use !important for height property to override inline style and make sure you use the right class name. element.style would work only in firebug or dev tools.

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

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

The only way to override an inline style in your stylesheet is by using the !important rule.

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

Also check this example

Upvotes: 7

Related Questions