We Keep Coding

Override existing div element that has !important by adding ID with javascript

Html code
<div class="hamburger-menu">
CSS code
.hamburger-menu {
Background-color: white !important;
}
I would like to override this by adding ID inside the div with javascript so i can add new background-color with ID selector. I am kind of new with javascript.
Anyone able to help me out?
Thank you

Whenever u style an element with !important, it will override all the existing styles even the id specified styles. Check this example
Always try not to use id selectors, inline styles, or styles with !important, as it will make it very difficult to modify styles.
Check out this article

Changing a css class from javascript [duplicate]

This question already has answers here:
Changing a CSS rule-set from Javascript
(9 answers)
Closed 4 years ago.
I want to set an element's height to window.innerheight but I have to do it in CSS because somehow I don't have access to that element to use javascript to change it's style.
Is there a way to do that? like changing a CSS class in javascript?
I tried this:
document.getElementById('root').style.setProperty('--view-height', window.innerHeight +'px');
and in CSS:
.menu {
height: var(--view-height) !important;
}
and it works but CSS Variables is not supported in older browsers so I can't use that, but I want something similar.
EDIT:
There is many answer yet they all use javascript, i said i CAN NOT USE js to set the element style! i want to do it only by css class style

In modern browsers you can use:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyOtherClass');
Although, for accomplishing your specific case, I'd go with לבני מלכה's answer.

Maybe use proper CSS instead:
window.innerHeight +'px' results in the same height as using 100vh. The unit vh means "viewport height" and 100vh is the full height of the inner window.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Set height in javascript instead use variables
document.getElementById('root').style.height=window.innerHeight +'px';
See example:
document.getElementById('root').style.height=window.innerHeight +'px';
#root{
background-color:red;
}
<div id="root"></div>
To your edit no use js use height:100vh; :
#root{
height:100vh;
background-color:red;
}
<div id="root"></div>

using vh unit is the proper way to do this.. (although Mahboobeh Mohammadi said that it isn't compatible with ios)
height: 100vh; is the full height of the view..

For Normal Js
function addClassById (_id,_class) {
document.getElementById(_id).classList.add(_class);
}
function removeClassById (_id,_class) {
document.getElementById(_id).classList.remove(_class);
}
addClassById("root","newClass")
I advise to you use JQUERY it s very easy to use.
Put this cdn link on your head tag then use it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//This is for change css
$("#root").css({
"background-color": "yellow",
"font-size": "200%"
});
// This is how to add class
$("#root").addClass('newClass');
// This is how to remove class
$("#root").removeClass('newClass')
I hope it help you.

can i add css with !important , only using jquery

hi i am using jquery
i want to add css color with important property to a label
i am currently trying it by
jQuery(this).css('color','green !important')
with out using a class
like
label_class
{
background-color:#f2f2f2 !important;
}
and using like
jQuery(this).addClass('label_class');
can i use only jquery to do this , please help

Yes its not that hard, but you should try avoid using !important all the time.
$("#tabs").css("cssText", "height: 650px !important;");
Heres a link to similar question How to include !important in jquery
Hope this helps :)

You should never need to do this. The !important flag indicates that the style should take precedence. With jQuery, you are applying the style inline to the element and therefore it already has the highest precedence.
Note that if you are using !important, you are probably doing something wrong. Consider restructuring your CSS selectors to ensure you don't need it.

Combining inline css and hover state, is it possible?

I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?
Simple example
<div id="test" style="color: red">test</div>
<style>
#test:hover {
color:blue;
}
</style>
In this case hover doesn't work.
Update
I can't use !important, because after it I will not be able to change that atribute via JavaScript.
Also I generate styles dynamically, so I can't add specific classes via JavaScript.

because inline css overrides your css styles in the file
if you had
color: blue !important
it would work but not recommended, you can always use jquery to remove the inline style tag though haha
Update:
remove the style tag using jquery or when using javascript... add !important so the inline css would have important

I can't use !important, because after it i will not be able to change
that atribute via javascript.
You can still use !important, just add a class with JavaScript and remove it anytime you want.
demo

The easiest way to go is the following
$(selector).hover(function() {
$st = $(this).attr("style");
$(this).attr("style","");
},function() {
$(this).attr("style",$st);
});

In CSS, the style attribute will override any style elements or stylesheets. If you cannot change the the style attribute, you'll have to use !important. If you can remove the style attribute altogether and place everything in the style element. Or even better, in a separate stylesheet your problem will be fixed.
P.S. The type attribute is required on style elements. This won't fix your problem, but you should change <style> to <style type="text/css">

Fancybox - Can't Set CSS with jQuery?

I was trying to adjust the position of my Fancybox with jQuery:
$('#fancybox-wrap').css("top", "200px !important");
And it wasn't working at all even with the !important bit. However if I simply do it with CSS, it's an OK deal:
#fancybox-wrap {
top: 200px !important;
}
Which leaves me really curious: is there something inside Fancybox' codes that's preventing me from changing the wrapper's CSS via JavaScript?

The css function put styles in style attribute. Some navigators seem to not allow usage of !important in inline style. But inline style should overpass css rule even if it is "important". So
$('#fancybox-wrap').css("top", "200px");
should work?

May be not a nice way but you can go this:
cssString = $('#fancybox-wrap').attr("style");
cssString = cssString.replace("top: 200px", "top: 200px !important");
$('#fancybox-wrap').removeAttr("style").attr("style", cssString);