使用 jQuery 通过查询浏览器的宽度和高度来加载选择性 CSS

load selective css using jquery by querying width and height of the browser

本文关键字：高度 加载 CSS 选择性 jQuery 查询 浏览器 使用      更新时间：2023-09-26

我目前正在使用此脚本根据屏幕宽度加载正确的 CSS。它工作正常。但是，在尝试通过查询宽度和高度来加载正确的脚本时，我遇到了问题。脚本如下。有人可以纠正我出错的地方吗？

提前谢谢。

function adjustStyle(width) {
    width = parseInt(width);
    height = $(window).height();
    if (width < 1010) {
        $("#size-stylesheet").attr("href", "css/style_1024.css");
    } else if ((width < 1281) && (height > 780)) {
        $("#size-stylesheet").attr("href", "css/style_1280.css");
    } else if ((width < 1281) && (height < 800)) {
        $("#size-stylesheet").attr("href", "css/style_1280mac.css");
    } else if (width < 1370) {
        $("#size-stylesheet").attr("href", "css/style_1366.css");
    } else if (width < 1450) {
        $("#size-stylesheet").attr("href", "css/style_mac1.css");
    } else if (width < 1610) {
        $("#size-stylesheet").attr("href", "css/style_1600.css");   
    } else {
        $("#size-stylesheet").attr("href", "css/style_FHD.css"); 
    }
}
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

这样做。下面给出的代码正在工作。

<!DOCTYPE html>
<html>
<head>
<title>question1</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="style3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>

$(window).ready(function(){

if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}       

});

$( window ).resize(function() {

if($(window).width()<1281 && $(window).height()>780)
{
    $("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
    $("#size-stylesheet").attr("href","style2.css");
}
else
{
    $("#size-stylesheet").attr("href","style3.css");
}
});
</script>
<body>
<div>
this is a webpage
</div>
</body>
</head>
</html>

您正在将width参数传递给您的函数，但没有传递给height所以这个问题来了。

我已经编辑了代码，希望它有效！！

function adjustStyle(width, height) {
    width = parseInt(width);
    height = parseInt(height);
    if (width < 1010) {
        $("#size-stylesheet").attr("href", "css/style_1024.css");
    } else if ((width < 1281) && (height > 780)) {
        $("#size-stylesheet").attr("href", "css/style_1280.css");
    } else if ((width < 1281) && (height < 800)) {
        $("#size-stylesheet").attr("href", "css/style_1280mac.css");
    } else if (width < 1370) {
        $("#size-stylesheet").attr("href", "css/style_1366.css");
    } else if (width < 1450) {
        $("#size-stylesheet").attr("href", "css/style_mac1.css");
    } else if (width < 1610) {
        $("#size-stylesheet").attr("href", "css/style_1600.css");   
    } else {
        $("#size-stylesheet").attr("href", "css/style_FHD.css"); 
    }
}
$(function() {
    adjustStyle($(this).width(), $(this).height());
    $(window).resize(function() {
        adjustStyle($(this).width(), $(this).height());
    });
});
相关文章：