Question

如果使用javascript（没有jQuery）更改浏览器窗口大小时更改div宽度？我想在用户调整浏览器大小时动态执行此作业。请帮忙，马上...... 有关css的这项工作的任何建议吗？

Answer 1

使用百分比。例如width="50%"这将改变浏览器大小更改时的宽度。

Answer 2

您可以使用CSS或Javascript

进行设置

使用％＆＃39>即可轻松完成CSS。

div {
    width: 95%;
}

使用

轻松完成JS

var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
    element.style.width = window.style.width;
});

Answer 3

此代码应适用于所有浏览器。但你真的应该使用CSS。

<!DOCTYPE html >
<html>
<head>
    <meta charset="utf8" />
    <title>untitled</title>
</head>
<body>
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div>

<script type="text/javascript">
var myElement = document.getElementById('myDiv');
function detectWidth(){
    var myWidth = 0;
    if(typeof (window.innerWidth)== 'number'){
        myWidth = window.innerWidth; 
    }
    else {
        myWidth = document.documentElement.clientWidth;  //IE7
    }
    myElement.style.width=myWidth-300+'px';
}
window.onload=function(){
    detectWidth();  
};
window.onresize = function (){
    detectWidth();
};
</script>
</body>
</html>

如何使用javascript更改浏览器窗口大小时更改div宽度

3 个答案: