0

My site display a page (which come from a remote server) trough an iframe. I don't have html control to this page but I'm allowed to add javascript code (no jquery) in JS file located on same remote server.

HTML

    <li id='row_force_language'><label for='row_force_language'>Language</label><select id='force_language' name='force_language' >
    <option  value="CA" >CA</option>
    <option  value="CS" >CS</option>
    <option  value="DA" >DA</option>
    </select>

This html is hidden with this css (present inside stylesheet located on remote server):

    #row_force_language {display: none;}

Now if I add this code in JS file the html do not become visible:

    document.getElementById('row_force_language').style.display='inline-block';

My JS code is wrong ? Or is just not possible ?

(The previous CSS code had "important" property. I removed "important" but I still unable to display hidden element.)

dotcom27
  • 1
  • 1
  • 2
  • 5
  • possible duplicate of [Overriding !important style using Javascript](http://stackoverflow.com/questions/462537/overriding-important-style-using-javascript) – Joseph Nov 13 '13 at 00:15

2 Answers2

0

It is indeed the !important that is stopping this inline style from being applied. Either get rid of the !important in your CSS or add one into your JS:

document.getElementById('row_force_language').style.display='inline-block !important';

However, notice that you're starting to get yourself into a specificity war already. I cannot recommend enough that you refrain from using the !important declaration as much as you possibly can.

Bryce
  • 6,440
  • 8
  • 40
  • 64
  • I tested your solution without luck too. I have now access to CSS and even if I remove "important" property no change. It seem is not this property who make problem. Any clue ? – dotcom27 Nov 13 '13 at 00:44
0

Inline styles generally have higher specificity than the ID selector, unless the selector has the !important keyword.

Inline styles with the !important keyword will take precendence over an #id selector with the !important keyword.

That being said, this will work:

document.getElementById('test').setAttribute('style','display:inline-block !important');

See an example here: http://codepen.io/anon/pen/tuKEm

HaukurHaf
  • 13,522
  • 5
  • 44
  • 59
  • I tried your code without luck. I have now access to CSS and I removed "important" property but this don't change nothing. I wondering if is not because the ID present in html is the same for all element (li, select field, label..). Maybe the JS must be adapted ? I'm newbie.. – dotcom27 Nov 13 '13 at 00:43
  • Yes, IDs need to be unique within each page. That's probably why this isn't working for you. – HaukurHaf Nov 13 '13 at 00:59