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>
0

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

    }

}

0

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

0

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

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

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

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

如果元素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;
}
0
jslang
天际的海浪 你是在F12控制台里改的吗,在那时改变没意义,要由代码改才有意义
5 个月之前 回复
qq_34571911
qq_34571911 谢谢你,我测试了发现不行啊,我在浏览器里,把li的宽度改成150px后,高度也不会自动跟着变成150px啊。
5 个月之前 回复

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

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



复杂一点的可以使用setTimeout() 定义监听事件,监听width的改变进行height的改变。
0
<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上。

0

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

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

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
当你想一个div的高随着屏幕的高度变化
有些时候我们的Dear总会有一些无理的要求,然后我们还不得不去解决,那么如何让一个div的高随着浏览器的大小来变化呢?尤其是打开浏览器再打开控制台,然后关闭之后,我们会发现,div的高不变化了,就是打开控制台时那么大. 那么下面的就是解决办法,具体如何使用自己研究吧!!!   height:calc(100% - 60px);  ...
css设置图片高随宽变化而变化
其实很简单,只需要设置宽的大小,像素也好,百分比也好,不设置高的大小,css就会自动按照图片的大小缩放比例。<style> img{ text-align:center; width: 60%; } .image{ text-align:center; width: 100%; overflow: hidden; } </style><div cla
[css]CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
div高度随窗口变化而变化
一个CSSDiv布局的实例,让DIV的高度随浏览器窗口的变化而变化,窗口变大,Div的高度会变大,窗口变小则Div变小,貌似智能化。
让div的大小随着内容的变化而变化
*{ margin:0px; padding:0px; } div{ display: inline-block;行内块级元素 width: auto;                         height:auto;                        border: 1px solid #ccc; } 请问div的margin值是多少上来
CSS布局:div高度随窗口变化而变化
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> CSS布局:div高度随窗口变化而变化 * {margin:0px;} html {height: 100%; } body {height: 100%; } div { margin:0 auto;}
左侧容器高度随着右侧容器的高度改变而改变
MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{font-family: Arial, Helvetica, sans-serif; background-color:#edf0eb;} a{ text-decoration:
DIV背景图片随DIV高度宽度变化而自动拉伸
 方法一:用css滤镜,问题是只支持IE5.5以上版本方法二:用两个层,一个放图片,用,为底部层;          另一个作页面显示层。建议用方法 西狐测试测试一下网页背景拉伸:) 实际使用后,发现有个需要注意的地方——使用AlphaImageLoader滤镜后,图片区域内的链接与按钮都将会失效,解决的办法是使用其他元素放置链接与按钮,浮动在该元素之上。 
实现div的大小随着内容进行动态改变
div的动态改变有两种方式:1.使用百分比的形式来实现div的动态改变的实现代码: #id{ width: 30%; height: 40%; } /* 这样一来,该div的宽度和高度将始终分别对应于浏览器的宽度的30%和40% */2.指定最小值来让浏览器自动实现div动态改变的实现代码: #id{ min-width: 100px; min-height: 200px; } /*
js设置div大小随窗口大小变化
pageEncoding="utf-8"%> Insert title here $(function(){ var mydiv=$("#mydiv"); var mydiv_resize=function(){ $(mydiv).css("width",$(window).width()); $(mydiv).css("height",$(window).height())
js实现容器的大小随窗口而改变
两种方法方法1&amp;lt;!doctype html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;    &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;    &amp;lt;title&amp;gt;等高等宽&amp;lt;/title&amp;gt;    &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, us
动态获取div的高度 随着窗口变化而变化 window.resize
autodivheight(); function autodivheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var winHeight=0; if (window.innerHeight){ winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientH
让子元素的宽高随着父元素的宽高缩放
让子元素的宽高随着父元素的宽高缩放
CSS中如何让图片随背景高度自适应变化高度
div class="mobileBg"> img src="img/mobile.png" alt="" class="imgNewBg" div> .mobileBg{ height: 100%; } .imgNewBg{ height:80%; }需要保证它的背景这个div具有一定的高度,这样img里面的图片可以随着背景盒子的高度自适应而改变高度
如何让select下拉框随着内容改变大小
111      22222      33333333      44444444444      555555555555555                function resetSelectWidth(obj){     var tempObj=document.createElement("select");     tempObj.length=1;    
textarea高度跟随文字高度而变化
html部分: 哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽 js部分:     function makeExpandingArea(el) {    var setStyle = function(el) {        el.style.height = 'auto';        el.style.height = el.scrollHeight +
使用背景图片,图片高度随宽度自动变化,并居中缩放,不变形
item{    width:100%; height:0; padding-bottom:41.8%; overflow:hidden; background-position:50%; background-repeat:no-repeat; background-size:cover; }
实现页面左侧固定,右侧随浏览器宽度变化而变化的布局
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; .box{ width: 8
左侧容器跟随右侧容器高度改变而改变
&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt; &amp;lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;head&amp;gt;..
父div随着子div的高度改变而改变
父div随着子div的高度改变而改变问题情况1:父div未设置高度,子div为标准流(即未设置浮动)<body> <div class="aa">父div <div class="bb">子div</div> <div class="cc">子div</div> </div> </body>此时的父div随着子div的改变而改变 情况2:父div设置
textarea文本域的高度随内容的变化而变化(适用于编辑文本)
/**                * 文本框根据输入内容自适应高度                * @param                {HTMLElement}        输入框元素                * @param                {Number}                设置光标与输入框保持的距离(默认0)            
解决父元素定位后宽度不随着子元素增大而增大的问题
给子元素加white-space:nowarp
使input文本框随输入内容变化长度的方法
使input的宽度能随着输入的内容而跟着变化,最初用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改变宽度的效果。 propertychange(属性改变事件):监听input里面的字符变化,该事件不仅仅会监听到input的value属性,还包括其他标签的属性各种属性发生变化都会发生该事件,比如span元素的style属性。在事件发生时还
input宽度随文字变化而变化
<input type="text" class="form-control"> <script> var searchinput=$("input"); var textWidth = function (text) { var sensor = $('<pre>' + text + '</pre>').css({display: 'none'});
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
CSS两侧固定宽度高随父元素变化,中间宽度随窗口宽度变化而变化布局效果
效果如下:代码如下:<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=
让iframe自适应高度 兼容多种浏览器随着窗口大小改变
工作中我们遇到了iframe嵌入页面高度自适应的问题。因为我们不知道所加载的iframe内容页面会有多高,又不想在页面上出现难看的滚动条,这个时候我们可以使用Javascript来动态让iframe自适应高度。 我们准备一个主页面a.html,以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html,内容可以自己随便加,实际应用中可能是后台生成的内容。
span中内容随着数字长度的增加而增大
场景:导航条中数据,当数据量不大时,只会显示几页,数字只有1,2,3,4..,数字写在span标签中, 则span不需要多宽,设置固定宽度就可以,但当数据量非常大的,例如:日志管理--有增 删 改就有记录,且记录会一直保存,不会删除。这时成千万的数据量显示,转到最后一行时,页数就可能为几百万条,显示7位数字,span标签宽度就要增加了,要随着数字长度的增加需增大。CSS设置,设置个最小宽度,内间距
【JavaScript】真正实现网页字体大小跟随屏幕变化而变化
方法一:     使用媒体查询Media获取屏幕宽度,根据不同屏幕下情况,给元素赋值不同字体大小, @media screen and (min-width:640px){ .IRYFloat P{ font-size: 3.0rem; } }   方法二:利用JS动态变化调整: &amp;lt;script t...
让div父元素的高度随子元素高度的变化而变化
先看下html代码: test /* main是父元素没有设置高度,我们想让其随子元素高度的变化而变化*/ #main{width:800px; border:5px solid red;} #left{width:400px; height:200px; background:green; float:left;} #right{width:200
固定Textview,字体随着字数的多少字体动态变化大小
package de.ankri.views; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Paint; import android.util.AttributeSet; import android.util.TypedValue; import
父元素随着子元素高度改变而改变
转载自https://blog.csdn.net/friendan/article/details/51043760
实现 textarea随内容高度自动变化
原理:生成一个新的textarea,不停获取当前textarea最新的值,然后计算高度赋给当前的textarea var addHandler = window.addEventListener?             function(elem,event,handler){elem.addEventListener(event,handler);}:             f
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}
CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
echarts图表大小随着外部div大小变化
jquery有resize()事件,但直接调用没有起作用,引入jquery.ba-resize.js文件就可以了。 例如: class="chart" > id="myChart" style="height:300px"> let myChart = Echarts.init(document.getElementById("myChart")); $('.chart'
使input框的宽度随输入的字符的长度变化而变化
4?this.value.length:4);" size="4"> 输入的长度大于4之后,input 框就会变化
如何让table的td随内容增加变宽,而不是换行
[size=small][size=xx-small][color=olive][/color][/size][/size] 1, 有时候table里的td随内容增加而导致内容换行,只要加上一下css td {text-overflow:ellipsis;white-space:nowrap;} 这样会使td变宽,table当然也变宽了 2, 要想让table不变宽,也不换行...
jqGrid随窗口大小变化自适应大小
第一种:  jqGrid随窗口大小变化自适应宽度 $(function(){             $(window).resize(function(){            $("#listId").setGridWidth($(window).width());         });        });      第二种: window.onresize = f
两个div左右铺满整个浏览器,左边宽度固定,右边随浏览器变化而变化
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X-U...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 互联网大数据下的学习变化 如何实现云计算