WEB前端:设置指定元素的宽度随浏览器宽度而变化

我那么讨厌做前端,为啥现在都是在说前段。。哎!!首先,需要使用JQ获取到当前浏览器的宽度$(window).width()然后设定指定元素CSS样式中宽度的代码$("#demo").css("width","100px")随后,将两者相结合$("#demo").css("width",$(window).width())然后,上演示源码<!DOCTYPE html> <

我那么讨厌做前端,为啥现在都是在说前段。。哎!!


首先,需要使用JQ获取到当前浏览器的宽度

$(window).width()

然后设定指定元素CSS样式中宽度的代码

$("#demo").css("width","100px")


随后,将两者相结合

$("#demo").css("width",$(window).width())


然后,上演示源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WEB前端:设置指定元素的宽度随浏览器宽度而变化</title>
    <script src="https://blog.mijupai.com/zb_system/script/jquery-2.2.4.min.js" type="text/javascript"></script>
    <style>
        div{width: 500px;height: 500px; margin: 10% auto;background-color: red;}
    </style>
</head>
<body>
    <div></div>
    <script>
$(document).ready(function(){
    $(window).resize(function(){
        $("div").css("width",$(window).width()*0.9)
    })
})
    </script>
</body>
</html>


说明:这里用到了一个$(window).resize()方法,用来监控当前浏览器,而且该元素属于必不可少的那种!

评论