Changing a css class from javascript

Question

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

Maybe a polyfill would help you with the older Browser issue? — Rence, Jul 03 '18 at 11:18
With this you can add a classname and in your CSS set styles to that new classname. https://www.w3schools.com/howto/howto_js_add_class.asp — Jacob-Jan Mosselman, Jul 03 '18 at 11:20

לבני מלכה · Answer 1 · 2018-07-03T11:47:19.153

0

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>

edited Jul 03 '18 at 11:47

answered Jul 03 '18 at 11:18

לבני מלכה

15,925
2
23
47

hey.. is this what you looking for? – לבני מלכה Jul 03 '18 at 11:24
see my edit please using css and not js – לבני מלכה Jul 03 '18 at 11:47
no 100 vh has a problem in IOS devices: – mahboub_mo Jul 03 '18 at 11:48
u must use js maybe use js only if you in mobile size sceen – לבני מלכה Jul 03 '18 at 11:50

score 0 · Answer 2 · answered Jul 03 '18 at 11:24

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.

score 0 · Answer 3 · answered Jul 03 '18 at 11:29

0

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

answered Jul 03 '18 at 11:29

feeela

29,399
7
59
71

https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html – mahboub_mo Jul 03 '18 at 11:42
100 vh has a problem in IOS devices – mahboub_mo Jul 03 '18 at 11:50
@MahboobehMohammadi Oh, OK. I just looked at https://caniuse.com/#search=vh and was satisfied by the green indicator… – feeela Jul 03 '18 at 15:42

score 0 · Answer 4 · answered Jul 03 '18 at 13:06

0

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..

answered Jul 03 '18 at 13:06

Me1o

1,629
1
6
8

Ramazan Zülkarneyn · Answer 5 · 2018-07-03T11:39:17.623

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.

Changing a css class from javascript

5 Answers5