how to override the element.style using css

Question

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

You must set !important after propery value e.g. .dhx_view { margin-top: 0 !important; } — Milan and Friends
– Milan and Friends, Commented May 1, 2014 at 12:26
.dhx_view i cant use it, can you give combination with view_id="calendar1" — Ravi Varma
– Ravi Varma, Commented May 1, 2014 at 12:32

djm.im · Accepted Answer · 2020-11-05 14:38:35Z

7

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

edited Nov 5, 2020 at 14:38

djm.im

3,3334 gold badges32 silver badges47 bronze badges

answered May 1, 2014 at 12:28

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

djm.im · Accepted Answer · 2020-11-05 14:38:59Z

3

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;
}

edited Nov 5, 2020 at 14:38

djm.im

3,3334 gold badges32 silver badges47 bronze badges

answered May 1, 2014 at 12:42

Orahmax

2,3614 gold badges22 silver badges33 bronze badges

Comments

djm.im · Accepted Answer · 2020-11-05 14:39:19Z

0

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.

edited Nov 5, 2020 at 14:39

djm.im

3,3334 gold badges32 silver badges47 bronze badges

answered May 1, 2014 at 12:27

Dave Mroz

1,4992 gold badges14 silver badges27 bronze badges

5 Comments

Ravi Varma Over a year ago

.dhx_view i cant use it can you give combination with id

GreyRoofPigeon Over a year ago

It won't work, because the other height is specified inline, which overrules all styles that are defined in a stylesheet.

Dave Mroz Over a year ago

Your code already uses it. If you want to do it with ID, you'll need to first assign an ID to the element and then change the . to # in the code above.

Dave Mroz Over a year ago

@LinkinTED - That's why I recommended losing the inline styles.

Dave Mroz Over a year ago

Ahh... I thought that the element.style thing was CSS that he was also using in addition to inline styles. Amending my response and upvoting yours.

Collectives™ on Stack Overflow

how to override the element.style using css

3 Answers 3

Comments

JSBIN

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related