Javascript - How to alter a property of a css class -
here's i'm trying do:
i want width of particular div changed every time resize window. div's class properties in external css document class name '.nav'.
in html:<body onresize="nav_resize()">
in js:
var w= window.innerwidth, h= window.innerheight; var nav= document.getelementsbyclassname('nav'); function nav_resize(){ if (w<700){ nav.style.width= w-150;} }
.nav{ background-color:#5f1c1c; position:fixed; float:left; width:190px; min-width:85px; top:105px; height:100vh; overflow:hidden; z-index:1; }
appreciated.
to control kind of resize events use @media css rule
@media screen , (min-width: 700px) { // css style +700px } @media screen , (max-width: 700px) { // css style -700px }
this avoid problems resize both smaller bigger , opposite.
Comments
Post a Comment