根据屏幕分辨率在javascript中更改CSS类的高度和宽度
根据屏幕分辨率在javascript中更改CSS类的高度和宽度
提问于 2013-04-07 07:13:21
我希望div类“content”的大小根据用户屏幕分辨率的大小而改变。
到目前为止，我已经编写了这个javascript
function resize()
{
if ((screen.width>1024)) { $(".content").style.width = 560 + "px"; $(".content").style.height = 315 + "px" }
if ((screen.width>1280)) { $(".content").style.width = 640 + "px"; $(".content").style.height = 360 + "px" }
else { $(".content").style.width = 853 + "px"; $(".content").style.height = 480 + "px" }
};显然，在html中，我有一个'.content‘类
为什么这段代码不能工作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-07 07:19:27
您在这里的具体问题是您混合了jQuery和原始javascript。
要使用jQuery设置元素的宽度，请使用width()或css()方法：
$(".content").width(560);
$(".content").css('width',560);话虽如此，你最好还是看看浏览器的大小，而不是屏幕分辨率。你的内容不应该响应我的浏览器的大小吗，不管我的屏幕大小？我没有让我的浏览器全屏显示。
最后，看看css media queries，它甚至可以响应浏览器的大小。有更好的方法可以做到这一点。
Stack Overflow用户
发布于 2013-04-07 18:10:35
您可以尝试使用jQuery和CSS
function checkWindowSize() {
if ( $(window).width() > 1800 ) {
$('content').addClass('large');
}
else {
$('content').removeClass('large');
}
}
$(window).resize(checkWindowSize); 对于CSS，你需要像这样写出来：
#content{
}
.large #content{
} 这是一个教程Source
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15857077
复制相关文章
相似问题
腾讯云开发者
