Applying CSS property to html in Jquery

Question

I have a css like

 html { zoom: 0.5; /* Old IE only */ -moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.5); } 

By which the all contents of the browser get smaller to fit with screen size. Now, I want to call a jquery method on resize of browser window and apply the same css properties from there.

How to apply these css props from jquery.

Please note, I need to set the css for "html" as shown and not for a div or other html element.

Please advise..

Answer 1

Something like this should work for you. But as pointed out in comment you should use media query . Media query should better suit your need.

 $( window ).resize(function() { $( "html" ).css({ "zoom": "0.5", /* Old IE only */ "-moz-transform": "scale(0.8)", "-webkit-transform": "scale(0.8)", "transform": "scale(0.5)" } ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

you can set a class with the required properties and add that class to html for the required event.

.resize {
    zoom: 0.5; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.5);
}
$(window).resize(function() {
    var root = $('html')[0];
    if (!$(root).hasClass('resize')){
        $(root).addClass('resize');
    }
)};