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的高度、
4 天之前 回复
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控制台里改的吗,在那时改变没意义,要由代码改才有意义
4 天之前 回复
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如何实现呢?
3 天之前 回复
qq_36111460
qq_36111460 同问啊。。。
4 天之前 回复
qq_34571911
qq_34571911 不是根据浏览器窗口的,是根据盒子里的文字内容长度
4 天之前 回复
$("#box").find("li").each(function(index,value){ var $width=$(value).width(); $(value).height($width); });

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
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设置图片高随宽变化而变化
其实很简单,只需要设置宽的大小,像素也好,百分比也好,不设置高的大小,css就会自动按照图片的大小缩放比例。<style> img{ text-align:center; width: 60%; } .image{ text-align:center; width: 100%; overflow: hidden; } </style><div cla
DIV背景图片随DIV高度宽度变化而自动拉伸
 方法一:用css滤镜,问题是只支持IE5.5以上版本方法二:用两个层,一个放图片,用,为底部层;          另一个作页面显示层。建议用方法 西狐测试测试一下网页背景拉伸:) 实际使用后,发现有个需要注意的地方——使用AlphaImageLoader滤镜后,图片区域内的链接与按钮都将会失效,解决的办法是使用其他元素放置链接与按钮,浮动在该元素之上。 
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
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())
动态获取div的高度 随着窗口变化而变化 window.resize
autodivheight(); function autodivheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var winHeight=0; if (window.innerHeight){ winHeight = window.innerHeight; } else if ((document.body) && (document.body.clientH
让div父元素的高度随子元素高度的变化而变化
先看下html代码: test /* main是父元素没有设置高度,我们想让其随子元素高度的变化而变化*/ #main{width:800px; border:5px solid red;} #left{width:400px; height:200px; background:green; float:left;} #right{width:200
[css]CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
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的大小随着内容进行动态改变
div的动态改变有两种方式:1.使用百分比的形式来实现div的动态改变的实现代码: #id{ width: 30%; height: 40%; } /* 这样一来,该div的宽度和高度将始终分别对应于浏览器的宽度的30%和40% */2.指定最小值来让浏览器自动实现div动态改变的实现代码: #id{ min-width: 100px; min-height: 200px; } /*
左侧容器高度随着右侧容器的高度改变而改变
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:
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=
css实现高度height随宽度width变化保持比例不变
方法1在保持元素宽高比恒定的情况下,要使得元素可以和父元素同比缩放。此时会用到 padding。 需要知道的是:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。 使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom 设置为想要实现的 height 的
【JavaScript】真正实现网页字体大小跟随屏幕变化而变化
方法一:     使用媒体查询Media获取屏幕宽度,根据不同屏幕下情况,给元素赋值不同字体大小, @media screen and (min-width:640px){ .IRYFloat P{ font-size: 3.0rem; } }   方法二:利用JS动态变化调整: &amp;lt;script t...
textarea高度跟随文字高度而变化
html部分: 哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽 js部分:     function makeExpandingArea(el) {    var setStyle = function(el) {        el.style.height = 'auto';        el.style.height = el.scrollHeight +
CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
父元素随着子元素高度改变而改变
转载自https://blog.csdn.net/friendan/article/details/51043760
要想让控件的长宽比随着窗口大小变化而自动调整,下面两个属性必须好好领会掌握。
要想让控件的长宽比随着窗口大小变化而自动调整,下面两个属性必须好好领会掌握。
CSS技巧,CSS设置任何元素宽度随内容增加自动变宽
宽度随内容增加自动变宽的问题,看起来简单,但网上各种找不到。 其实感觉以前在布局的时候在哪里遇到过自动变宽,想了好久好像记得只有用table布局的时候吧,但是不可能哪里都用table,如果用层那怎么办呢。 然后又发现了一个熟悉,display!!没错,就是它,很平常的一个属性,块状元素嘛,几乎天天用,居然忽略了。 给元素加上 display:table; 就OK了。 记录一下。不用那么麻烦
左侧容器跟随右侧容器高度改变而改变
&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+css实现界面随着不同的屏幕变换自动调整大小
1 首先用css元素让body和html元素的的height和width设置成100%。   因为当我们设置100%的时候有一个对照的父元素,也就是说参照谁来设置自己高和宽的百分比。   对于有些浏览器来说,把屏幕的高和宽作为body元素的参照父元素,对于有些浏览器来说把屏幕的高和宽作为htm   的参照父元素,所以第一步同时把这两个元素作为参照父元素。2 定义一个盒子div ,设置div的wid...
span中内容随着数字长度的增加而增大
场景:导航条中数据,当数据量不大时,只会显示几页,数字只有1,2,3,4..,数字写在span标签中, 则span不需要多宽,设置固定宽度就可以,但当数据量非常大的,例如:日志管理--有增 删 改就有记录,且记录会一直保存,不会删除。这时成千万的数据量显示,转到最后一行时,页数就可能为几百万条,显示7位数字,span标签宽度就要增加了,要随着数字长度的增加需增大。CSS设置,设置个最小宽度,内间距
使用背景图片,图片高度随宽度自动变化,并居中缩放,不变形
item{    width:100%; height:0; padding-bottom:41.8%; overflow:hidden; background-position:50%; background-repeat:no-repeat; background-size:cover; }
iframe 随子页面大小变化而变化
子页面大小小于屏幕大小时,按一屏显示;多于一屏时,出现滚动条。子页面大小发生变化时,iframe自适应。window.setInterval(function(){ var bodyheight = $("#iframe").contents().find("body").height(); var winheight=$(window).height(); if(bodyh
20.当图片有宽度的时候,图片的高度会随着宽度成比例缩放!
当图片有宽度的时候,图片的高度会随着宽度成比例缩放!          Document                   html,body {             height:100%;         }         ul {             width:100%;         }         li {
固定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
让子元素的宽高随着父元素的宽高缩放
让子元素的宽高随着父元素的宽高缩放
css div的宽度随内部元素的宽度的变化而变化
div是块级元素,如果不设置他的明确的宽度,那他就等于父元素的宽度,如果要让其它随着子元素的变化而变化,需要改变他的属性,给他加上这个css属性即可display:inline-block 或干脆把div替换为span解决   ...
input宽度随文字变化而变化
<input type="text" class="form-control"> <script> var searchinput=$("input"); var textWidth = function (text) { var sensor = $('<pre>' + text + '</pre>').css({display: 'none'});
父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设置
浮动布局——margin & 闭合浮动
实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 考察浮动 #content { background-color: red; position: relative; padding: 12px;/*red 的padding+blue的margin
HDOJ/HDU 1256 画8(绞下思维~水题)
Problem Description 谁画8画的好,画的快,今后就发的快,学业发达,事业发达,祝大家发,发,发.Input 输入的第一行为一个整数N,表示后面有N组数据. 每组数据中有一个字符和一个整数,字符表示画笔,整数(>=5)表示高度.Output 画横线总是一个字符粗,竖线随着总高度每增长6而增加1个字符宽.当总高度从5增加到6时,其竖线宽度从1增长到2.下圈高度不小于上圈高度,但
CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
.w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}
纯css怎么控制一个div的高度跟随另外一个DIV高度发生变化
实现的效果大致是这样的:左右两个div左边div的高度随着右边的高度发生变化,当两者的最大高度都不超过屏幕高度时整屏显示,当右边高度发生变化时候那么左边的高度跟随其发生变化:实现的关键点有两点:1 合理运用min-height   2 padding-bottom:9000px;margin-bottom:-9000px;两者的结合运用。下面贴上源码仅供参考; Document
盒子宽度随文字的增加而变宽
盒子的宽度随文字的多少增大,如果字数多于一行还想要高度自适应的话要设置高度为auto&amp;lt;!DOCTYPE HTML&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=UTF-8&amp;gt;&amp;lt;title&amp;gt;展开隐藏&amp;lt;/title&amp;gt;&amp;lt;style&amp;gt;    .bor{         font-size:25px;        co
背景图片有边框线条. 内容自动适应. 自动随窗口宽度的改变而改变.
如下效果图. 这个图片的边框.宽度随浏览器的宽度而变化. 内容也按照原定比例缩小.   style> .yiguoqi,.weishiyong,.yiguoqi{ background-size: 100%; /*关键点*/ background-repeat: no-repeat; bac
使input框的宽度随输入的字符的长度变化而变化
4?this.value.length:4);" size="4"> 输入的长度大于4之后,input 框就会变化
textarea高度随文字增多变化高度
function MaxMe(o) {       o.style.height = o.scrollTop + o.scrollHeight + "px";     }
如何使div根据里面内容而改变大小
1.display: inline-block;2.width: auto; height: auto;
文章热词 随机森林参数变化 JavaScript JavaScript培训 JavaScript课程 JavaScript学习
相关热词 c# 随着底部变化 android8.0的变化 c++实现傅里叶变化的作用 人工智能如何实现学习 如何学python