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

Question

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>

Answer 1

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

Answer 2

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

Answer 3

<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上。

Answer 4

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

Answer 5

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

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