<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#div {
width: 100px
height: 50px
border: 1px solid red
color: green
text-align: center
}
input {
width: 250px
}
</style>
<script>
function test() {
var a = document.getElementById('a')
var b = document.getElementById('b')
var div = document.getElementById('div')
div.style.width = a.value + 'px'
div.style.height = b.value + 'px'
}
</script>
</head>
<body>
<div>宽度（默认100px）：<input type="text" id="a" placeholder="输入想要的宽度，点击测试看效果" /></div>
<div>高度（默认50px）：<input type="text" id="b" placeholder="输入想要的高度，点击测试看效果" /></div>
<div><button onclick="test()">点击测试</button></div>
<div id="div">来改变我</div>
</body>
</html>
楼主的代码可以用，我在 IE6、7、8 和 firefox12 里试了，都可以，可能是html部分的问题。<style type="text/css">
div{ width:100pxheight:100pxborder:1px solid red}
</style>
<script type="text/javascript">
window.onload=function(){
var screenWidth=screen.width
var screenHeight=screen.height
document.getElementById('middoles').style.width=screenWidth.toString()
document.getElementById('box').style.width=screenWidth.toString()
document.getElementById('top').style.width=screenWidth.toString()
var leftWidth=(screenWidth)/2-295
document.getElementById('contentleft').style.width=leftWidth
document.getElementById('contentright').style.width=screenWidth/2
}
</script>
<body>
<div id="middoles">middoles</div>
<div id="box">box</div>
<div id="top">top</div>
<div id="contentleft">contentleft</div>
<div id="contentright">contentright</div>
</body>
这个要绝对定位的div可以，也就是position为absolute 或fixed。var chg_width="每次改变的宽带"
div.style.left=div.style.left-chg_width/2
div.style.width=div.style.width+chg_width
这个方法如果一次改变宽度比较多的话看起来向两边同时宽展可能效果并不平滑，要想精确的平滑效果你还要在left和width的变化上加成1px左移和变宽动画。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）