2 qq 34571911 qq_34571911 于 2018.09.14 18:43 提问

javascript 两个DIY一样的宽度。 20C

用javascript 如何实现 当 "aa"的宽度发生变化时,“bb”的宽度也随之变化成一样的宽度。

 <div class="aa"></div>
 <div class="bb"></div>

2个回答

showbo
showbo   Ds   Rxr 2018.09.14 21:37

aa,bb样式怎么写的,inline-block?

aa内容改变导致的宽度改变还是什么?最好是在更改aa内容改变后或者aa宽度(aa.offsetWidth)设置bb的宽度(bb.style.width=aa.offsetWidth+'xp')

如果你无法修改逻辑,就用计时器定时执行上面的设置bb宽度代码就行


<style>.aa,.bb{background:#eee;margin-left:10px;display:inline-block}</style>
<div class="aa">aaa</div>
<div class="bb">bbb</div>
<script>
    var aa = document.querySelector('.aa'), bb = document.querySelector('.bb');
    setInterval(function () { bb.style.width = aa.offsetWidth + 'px' }, 100)

    setInterval(function () {aa.innerHTML+='a' }, 1000);
</script>

showbo
showbo 回复qq_34571911: div原本就占用一行,所以和你的aa样式有关。如果没设置过就是直接浏览器宽度,你应该是想设置高度吧,这样内容不一样高度才会不一样。直接执行第一个setInterval里面的语句就行了,。 window.onload=function(){var aa = document.querySelector('.aa'), bb = document.querySelector('.bb');bb.style.width = aa.offsetWidth + 'px' ;bb.style.height= aa.offsetHeight + 'px' }
6 天之前 回复
qq_34571911
qq_34571911 你好,我的意思是 假如div class="aaa" 里面有很多文字的话,这个div 宽度就会增大, 那么虽然div class="bbb"就算没有文字,也会随着aaa变宽而变宽。
7 天之前 回复
caozhy
caozhy 正确,✔
7 天之前 回复
zhaomin_g
zhaomin_g   2018.09.17 12:23

如果要实现一个div宽度边框,另一个div也进行调整:那必须有个线程不停检测div1
的宽度是否发生变化:
如: var dw1 = 100;//div1的初始宽度
setInterval(function() {
if(div1.width != dw1) {//伪代码
dw1 = div1.width;
dw2.resize(dw1);
}
});

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
如何使两个表格的列宽一致?
    a     b     c                 这里是你的文字     你看看     会不会自动适应呀?                 var   da   =   document.all;     da.t1.style.width=da.t2.clientWidth;     da.td1.style.width=da.d1.clientWidth;    
两个字符串看起来是一样的,但是字符串的长度显示不同 -- java
一. 问题 今天发现,程序中,比较两个字符串是否相等的部分, 出现了, 两个字符串看起来相同, 但是比较结果确实不同的情况。 二. 具体情况 1. 字符串的内容是通过读取文件来得到的。 2. 比较的两个字符串来自两个不同文件。 3. 后来发现, 一个文件的编码是utf8+bom,一个是utf8。 三. 解决方案 将utf8+bom的编码格式改为utf8。问题解决。 只要将两个文件的...
Android自定义RelativeLayout,使宽度和高度一样
有的时候需要使某一个布局宽度和高度一样,可以自定义一个布局来实现: public class SquareLayout extends RelativeLayout{ public SquareLayout(Context context) { super(context); } public SquareLayout(Context context, AttributeSet a
元素自适应宽度、换行
通过设置百分比和最小宽度来实现,放大可以均匀排列,缩小可以自动换行 #kpi_tb input{ width: 100px; } #kpi_tb .row{ margin:0px; padding:0px; width: 100%; text-align:center; display: inline-block; position: relative; } #kp
【android】两个按钮的宽度各占屏幕的一半
LinearLayout>  Button  android:layout_height="wrap_content"  android:layout_width="fill_parent"  android:layout_weight="1"/>  Button  android:layout_height="wrap_content" android:layout_wi
discuz二次开发-门户下面diy模块(全能调取数据)
discuz二次开发-门户下面diy模块(全能调取数据),
js实现高度自适应的两个div高度相等
这里有两个高度自适应的div: 点击按钮之后效果如下: CSS代码: .left{ width:100px; padding:10px; float:left; background:red; border:1px solid #ccc; } .right{ width:100px; padding:20px; float:left; backgrou
一步一步DIY jQuery库1
前一段时间,看到一篇系列文章《从零开始,DIY一个jQuery 1-3》三篇文章从头讲解如何DIY一个JQuery,感觉挺有意思。 我在前端已经有了一年的经验,jquery几乎是每天都会使用到,但是现在还没时间去研究一下它的实现原理,即使这样我也想动手尝试下DIY一个JQuery库,我相信这可以加深我对jquery的理解,当然我也试着去学习jquery的原理,这很可能会写成一个系列的文章,这个
DIY 首页可视化编辑
DIY初始化(diy.init.js): $(function () { //添加一个模块 $(".j-diy-addModule").click(function () { var type = $(this).data("type"); //获取模块类型 var strUrl = window.location.toLocaleString()
当输入名字时,两个字与三个字实现宽度对齐(html)
当我们输入名字时,如果有两个字和三个字的,我们可以在两个字的子之间输入空格来实现与三个字宽度对齐,注意输入的空格是全角空格,如: 姓 名: 验证码:

相似问题

9
Javascript 插入一个div 到span里。
3
Javascript list怎么把list:里的宽度修改为100%呢
11
JSON字符串消息转换成Javascript的对象出错
12
JavaScript代码闭包的问题,错误提示:mutable variable is .....
3
JavaScript关于闭包的运行机制的问题,运行w3cschool的代码,结果出现问题
3
请问各位大牛、大鸟,怎么用h5和javascript实现幸运大转盘
11
请问如何用JavaScript分隔字段,并输出到html
2
javascript语言怎么读取我的文档目录下的word文件并且自动汇总,判断后再显示出来?
3
javascript语言怎么实现可以扩展的箭头,箭头下面出现子箭头,然后再一层打开的界面?
4
javascript一个奇怪的小问题,怎么在javascrpt里面实现html页面的直写功能?
9
javascript简单的问题,想要c币的都来回答:怎么在js网页中实现
4
javascript怎么实现对文本框的判断,在执行以后怎么判断一下,代码的实现怎么写?
2
javascript怎么读取u盘里的xml文件并且调用摄像头判断
4
javascript编程语言怎么实现拖动div并且保存div的布局
1
如何使用javascript实现一件电脑优化、清理和设置主页的功能,可以远程控制设置主页的内容
1
在线急等解决就给c币:请问javascript中如何实现调用onekeyghost重装系统?
14
一个简单的javascript的问题,怎么使用jquery判断一个页面
10
javascript都来回答,怎么实现下拉选择日期的功能,JQ或者JS怎么实现?
10
javascript怎么在网页中控制跑马灯的启动和停止?怎么实现字幕跑马灯?
12
javascript求数组中的最大数,返回的是数组的下标,不是值,百度了一天没找到,怎么做