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>&nbsp; &nbsp; #box {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; height: auto;&nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }&nbsp; &nbsp; #box li{&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; }&nbsp; &nbsp; #box li::before{&nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; padding-top: 100%;&nbsp; &nbsp; }&nbsp; </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); });以上是代码，还有实现的效果截图