Cannot override the height with !important using javascript

Question

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();

Answer 1

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.

Answer 2

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.