[英]Applying CSS property to html in Jquery
I have a css like 我有一个CSS像
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.
现在,我想在调整浏览器窗口大小时调用jquery方法,并从那里应用相同的CSS属性。
How to apply these css props from jquery. 如何从jQuery应用这些CSS道具。
Please note, I need to set the css for "html" as shown and not for a div or other html element. 请注意,我需要为显示的“ html”设置css,而不是为div或其他html元素设置css。
Please advise.. 请指教..
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>
you can set a class with the required properties and add that class to html for the required event. 您可以使用所需的属性设置一个类,并将该类添加到html中以获取所需的事件。
.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');
}
)};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.