qq_34571911
qq_34571911
采纳率58.3%
2019-01-13 02:52

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

40
已采纳

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条回答

  • qq_43137221 冰·羽 2年前


    #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
    
        }
    
    }
    

    点赞 评论 复制链接分享
  • web_pei web小蜗牛 2年前
    $("#box").find("li").each(function(index,value){ var $width=$(value).width(); $(value).height($width); });

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

    点赞 评论 复制链接分享
  • u014292161 前端○萌妹 2年前

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

    点赞 评论 复制链接分享
  • yanzhi_2016 yanzhi_2016 2年前
    <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上。

    点赞 评论 复制链接分享
  • weixin_38652136 邪恶八进制 2年前

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

     style="width: 100px; overflow: auto;"
    
    
    
    复杂一点的可以使用setTimeout() 定义监听事件,监听width的改变进行height的改变。
    
    点赞 评论 复制链接分享
  • jslang 天际的海浪 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;
    }
    
    点赞 评论 复制链接分享
  • weixin_44510105 ʚ拾叁ɞ cium 2年前

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

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

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

    点赞 评论 复制链接分享
  • hmy123cq3 道斯 2年前

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

    点赞 评论 复制链接分享

相关推荐