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>

#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都会自适应大小

如果元素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;
}

典型盒子模型两种宽度调节方式：
一使用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上。

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

$("#box").find("li").each(function(index,value){ var $width=$(value).width(); $(value).height($width); });

以上是代码，还有实现的效果截图