javascript 如何实现高度随着宽度的变化而变化,

js如何实现,如果width="200px"的话,height:也自动等于200px;

<style type="text/css">
#box li{ float:left;width: 100px; height: 100px; backgrounnd-color:#f60;}
</style>

<ul id='box'>
<li></li> 
<li></li>
<li></li>
</ul>

8个回答


#box li {
border: 1px solid #000;
float: left;
}

window.onload = function () {

    var li = document.querySelectorAll('li')
    for(var i = 0; i< li.length;i++){
        var item = li[i]
        var w = item.clientWidth
        item.style.width = item.clientWidth
        item.style.height = item.clientWidth

    }

}

宽度是通过什么动作触发的呀?可以通过触发事件,写一个重新改变box属性值方法。

在JavaScript代码中添加一个window.onresize事件的处理:

window.onresize = function(){
    //这里写改变box2的高度的代码
}

这样当浏览器大小每次被改变时box2都会自适应大小

weixin_42211816
依然范特西的XXK 回复qq_34571911: 那你先获得li的宽度,再赋值给li的高度、
一年多之前 回复
qq_34571911
qq_34571911 谢谢你,我是初学的,因为LI里的内容长度是不确定的,但是我想这个LI是个正方形,所以想li的高度自动根据宽度变化。
一年多之前 回复

如果元素width是直接或间接的通过js代码改变的话。在那行js代码之后加上
domObj.style.height = (domObj.currentStyle||getComputedStyle(domObj,null)).width;

如果元素width是因为浏览器窗口尺寸变化改变的话。可以在window.onresize中设置

window.onresize = function() {
    domObj.style.height = (domObj.currentStyle||getComputedStyle(domObj,null)).width;
}
jslang
天际的海浪 你是在F12控制台里改的吗,在那时改变没意义,要由代码改才有意义
一年多之前 回复
qq_34571911
qq_34571911 谢谢你,我测试了发现不行啊,我在浏览器里,把li的宽度改成150px后,高度也不会自动跟着变成150px啊。
一年多之前 回复

典型盒子模型两种宽度调节方式:
一使用overflow: auto二使用height: auto;

 style="width: 100px; overflow: auto;"



复杂一点的可以使用setTimeout() 定义监听事件,监听width的改变进行height的改变。
<style>
    #box {
      width: 100%;
      height: auto;
      overflow: hidden;
    }
    #box li{
      position: relative;
      float: left;
      width: 200px;
      border: 1px solid red;
    }
    #box li::before{
      content: '';
      display: block;
      width: 100%;
      padding-top: 100%;
    }
  </style>

使用伪元素撑起li的高度,使得li保持正方形。
li里面的内容需要使用div包裹一下,使用position固定定位在li上。

你的宽度变化是改变浏览器窗口大小还是代码中赋的值?

qq_34571911
qq_34571911 回复qq_34571911: js如何实现呢?
一年多之前 回复
qq_36111460
qq_36111460 同问啊。。。
一年多之前 回复
qq_34571911
qq_34571911 不是根据浏览器窗口的,是根据盒子里的文字内容长度
一年多之前 回复
$("#box").find("li").each(function(index,value){ var $width=$(value).width(); $(value).height($width); });

图片说明
以上是代码,还有实现的效果截图

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐