I have a div.innerDiv which has been assigned a height: 300px !important; in a CSS file. I can neither change the existing CSS file nor add a new class to override. Since the style is !important, so it can be overridden as an inline style, by only, !important. But it doesn't produces the desired effect.

Refer demo here.

UPDATE: I needed only inline style.

HTML:

<div>
    <div class="innerDiv">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
        software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS:

.innerDiv {
  height: 300px !important;
  width: 150px;
  border: 1px solid;
}

JS:

function overrideHeight() {
    document.getElementsByClassName('innerDiv')[0].style.height = 400 + 'px !important';
}

overrideHeight();

I have a div.innerDiv which has been assigned a height: 300px !important; in a CSS file. I can neither change the existing CSS file nor add a new class to override. Since the style is !important, so it can be overridden as an inline style, by only, !important. But it doesn't produces the desired effect.

Refer demo here.

UPDATE: I needed only inline style.

HTML:

<div>
    <div class="innerDiv">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
        software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

CSS:

.innerDiv {
  height: 300px !important;
  width: 150px;
  border: 1px solid;
}

JS:

function overrideHeight() {
    document.getElementsByClassName('innerDiv')[0].style.height = 400 + 'px !important';
}

overrideHeight();

• javascript
• html
• css

• Possible duplicate of Overriding !important style – C3roe Commented Feb 23, 2016 at 10:19
• @CBroe, Thankyou for marking as duplicate. But I would like to inform you that, I did a thorough research before posting this question. I have browsed to the specified link before, where, it didn't helped me as, it creates a new styling, and I have mentioned already that I need to solve using inline CSS. Hope you have read it. – Shashank Commented Feb 23, 2016 at 10:49

4 Answers 4

Change your function declaration to this:

function overrideHeight() {
  document.getElementsByClassName('innerDiv')[0].style = "height: 400px !important";
}

This should work. See this fiddle.

It seems that !important keyword is not allowed to be included in the former syntax, i.e. using style.height directly. The setting of the style attribute works, but it does not have value.

You may already have known it. But, in case you forget, you can inspect the fiddle result by right click on it, and fix something not working properly.

In my browser (iPad Safari), Matt's answer only works if amended to:

function overrideHeight() {
document.getElementsByClassName('innerDiv')[0].style.cssText = "height: 400px !important";
}

So might be worth keeping an eye on cross-browser quirks.

Matt's answer works perfectly well, but here's another, which uses JS to create <style> tags in the head of the document:

var styleTags = document.createElement('style');
styleTags.type = "text/css";
var styleText = document.createTextNode('.innerDiv { height: 400px !important; } ');
styleTags.appendChild(styleText);
document.getElementsByTagName('head')[0].appendChild(styleTags);

.innerDiv {
  height: 300px !important;
  width: 150px;
  border: 1px solid;
}

<div>
    <div class="innerDiv">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
        software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

Just another way of achieving the same result.

Another alternative:

document.getElementsByClassName('innerDiv')[0].style.setProperty("height", "400px", "important");