JS如何设置一个div高度值随另一个div宽度值变化而变化?
想让box2的高度获取box1的宽度(box1宽度已设为窗口100%),实现当浏览器宽度发生变化box2的高度动态获取box1的动态宽度而变化,但现在这样写我改变浏览器宽...
想让box2的高度获取box1的宽度(box1宽度已设为窗口100%),实现当浏览器宽度发生变化box2的高度动态获取box1的动态宽度而变化,但现在这样写我改变浏览器宽度大小每次要点刷新后box2的高度才赋上box1新的宽度值而变, 如何加方法使得box2高度随box1的宽度发生变化而马上变化,不是靠刷新才变化?
展开
展开全部
首先设置两个div,假设给出id分别为a和b,b始终为a的宽度的二分之一。
js代码为:
var diva=document.getElementById("a");
var divb=document.getElementById("b");
var wid=diva.offsetWidth;
function jt(){//定义监听a大小变化的函数
var wid1=diva.offsetWidth;//获取宽度
if(wid1!=wid){
wid=wid1;
resizeb();
}
setTimeout("jt",100);
}
function resizeb(){
divb.style.width=wid*0.5;//改变b的大小
}
jt();
但是这样写是在不知道a的大小为什么变化的情况下,这样写很耗cpu,如果很明确a的大小变化原因,直接给a绑定事件就可以了
js代码为:
var diva=document.getElementById("a");
var divb=document.getElementById("b");
var wid=diva.offsetWidth;
function jt(){//定义监听a大小变化的函数
var wid1=diva.offsetWidth;//获取宽度
if(wid1!=wid){
wid=wid1;
resizeb();
}
setTimeout("jt",100);
}
function resizeb(){
divb.style.width=wid*0.5;//改变b的大小
}
jt();
但是这样写是在不知道a的大小为什么变化的情况下,这样写很耗cpu,如果很明确a的大小变化原因,直接给a绑定事件就可以了
展开全部
在JavaScript代码中添加一个window.onresize事件的处理:
window.onresize = function(){
//这里写改变box2的高度的代码
}
这样当浏览器大小每次被改变时都会自动修改box2的高度 也就是自适应
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
window.onresize = function()
{
//你改变DIV大小的代码
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询