使用javascript更改浏览器窗口大小时如何更改div宽度
使用javascript更改浏览器窗口大小时如何更改div宽度
提问于 2014-03-25 22:45:32
当浏览器窗口的大小随javascript (无jQuery)改变时，如何改变div宽度？我想在用户调整浏览器大小时动态执行这项工作。请帮帮忙，马上...对css这项工作有什么建议吗？
回答 3
Stack Overflow用户
发布于 2014-03-25 22:50:09
使用百分比。例如，width="50%"这将在浏览器大小改变时改变宽度。
Stack Overflow用户
发布于 2014-03-25 22:50:41
您可以使用CSS或Javscript设置此设置
使用%s ie可以很容易地完成CSS
div {
width: 95%;
}使用JS可以很容易地完成
var element = document.getElementById("x");
window.addEventListener('resize', function(event) {
element.style.width = window.style.width;
});Stack Overflow用户
发布于 2014-03-25 23:32:58
这段代码应该可以在所有浏览器中运行。但是你真的应该使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22638020
复制相关文章
相似问题
腾讯云开发者
