i've got div covering entire document:
<div style="position:'fixed';left:'0px';width:'100%';height:'100%';top:'0px',z-index:-20"> the zindex of -20 prevent div coming on top of other elements , interfering mouse events.
however, when page busy asynchronous request, want bring div top. async request function sets class of user-defined variable element "ajaxbusy" , style class want. however, in case, style of "zindex:100" isn't working, because default value of -20 overriding it!
here's code i'm using show div:
css('.ajaxbusy').backgroundcolor="#ffddff" css('.ajaxbusy').zindex='100 !important' (the css function returns style-sheet object style property, it's 30 lines of code have omitted it.)
how css class definition override value has been assigned directly element? i've read specificity , inheritance, didn't seem address effects applicable in document itself.
if use js set element style (i.e. ele.style.zindex), '100 !important' not legal value (while '100' is), expression silently fails.
however, if use ele.setattribute('style', '.....'), !important applied.
and, inline style has higher previledge css class, cannot override it.
a better approach be, if edit html, use different class definitions.
<style> .undercover { z-index: -20; } .cover { z-index: 100; } </style> <div class="ajaxbusy undercover"> then change class name when want make
var ajaxbusy = document.queryselector('.ajaxbusy') ajaxbusy.classlist.remove('undercover') ajaxbusy.classlist.add('cover') 