4

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();
Shashank
  • 2,010
  • 2
  • 18
  • 38
  • Possible duplicate of [Overriding !important style](http://stackoverflow.com/questions/462537/overriding-important-style) – CBroe Feb 23 '16 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 Feb 23 '16 at 10:49

4 Answers4

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.

Matt Sadev
  • 123
  • 1
  • 12
3

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.

Rob_jS
  • 441
  • 3
  • 8
  • thankx for mentioning, not only in Ipad Safari, but also in IE and FF, this code does work pretty well. – Shashank Feb 23 '16 at 13:16
1

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.

David Wilkinson
  • 5,060
  • 1
  • 18
  • 32
  • cannot even create a new style, only `inline CSS`. – Shashank Feb 23 '16 at 10:51
  • 1
    @Shashank how's it possible that you can use JS one way but not another way? You do not have a ``? It wouldn't matter, it's actually valid to place a ` – zer00ne Feb 23 '16 at 10:55
  • @Shashank not even internal/same page CSS styles? – David Wilkinson Feb 23 '16 at 10:55
  • @DavidWilkinson, no in my case only `inline` is allowed. Otherwise, I had the idea of internal CSS before. – Shashank Feb 23 '16 at 10:56
  • @zer00ne, the question is not about `head`. But the number of lines should also be minimum. – Shashank Feb 23 '16 at 10:58
  • if the `internal` css was an option, then it could have been done without `javascript` too. – Shashank Feb 23 '16 at 11:00
  • What platform, or framework are you using to have such weird and debilitating limitations? I'd like to know so I may avoid it at all costs. – zer00ne Feb 23 '16 at 11:03
  • @Shashank yes, if internal CSS was an option it could've been done without JS too - of course it could. Anything is an option if its allowed... The way you asked your question invokes the assumption that you can only use JS and can't change the HTML / CSS (adding a class to the element, etc) yourself? With this in mind, I provided another example of what you could possibly use. – David Wilkinson Feb 23 '16 at 11:06
  • Cannot disclose all the details but it gets approved by higher authority, where they look out for only minimum changes although non-smart code. – Shashank Feb 23 '16 at 11:07
  • @DavidWilkinson, no problem, thanks a lot...anyways, learning new is always a welcome step. – Shashank Feb 23 '16 at 11:08
  • @Shashank Stifled by administration, you have my sympathies, sir. – zer00ne Feb 23 '16 at 11:24
0

Another alternative:

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

ton
  • 15
  • 4