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

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

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

-1

2个回答

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>

0
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' }
10 个月之前 回复
qq_34571911
qq_34571911 你好,我的意思是 假如div class="aaa" 里面有很多文字的话,这个div 宽度就会增大, 那么虽然div class="bbb"就算没有文字,也会随着aaa变宽而变宽。
10 个月之前 回复
caozhy
贵阳挖掘机马善福,自备车辆专业挖游泳池 正确,✔
10 个月之前 回复

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于两个table,相等的宽度却互相晃的问题
这个时候,是因为单元格里面的内容比单元格大,所以会冒出来。解决方法是将td的宽度调到和内容差不多时,两个table自然会对齐了!
设置两个textview 文本长度不一致 但实际占位长度一致
设置hint内容相同n
html将table的宽度总和设置为和div宽度相同的方法
重点是:table-layout=fixed; width=100%;效果:650) this.width=650;" src="https://s3.51cto.com/wyfs02/M00/92/6A/wKiom1j_M-bwQp95AABiVjlOp6M372.png-wh_500x0-wm_3-wmp_4-s_2602185900.png" title="index.png" alt="w
JavaScript判断两个数组是否相同
判断数组是否相同
让两个div元素有相同的高度
取得它们的高度后得到最大高度,然后赋值n var $divClass = $('.className');n var height = 0;n $divClass.each(function () {n if ($(this).height() &gt; height) {n height = $(this).height();n }n });n $divCla
子元素浮动后,两个子元素高度不一样,父元素自适应高度,子元素自适应为相同高度
rn//只适用于右边的比左边的高度长rn rn  .parent_elem { rnoverflow: hidden;  position: relative;}rn  .right { float: right; width: 92%; }rn  .left { float: left;width: 8%; }rn  .left_pos {position: absolute;width:
如何做到让两个一模一样大小的view中的一个实时跟着另一个缩放和移动,位置始终保持一致
最近做到这样一个需求,打开PDF后,需要做笔记,我在上面布置了一个大小一模一样而且都是match_parent,相对布局;支持无论缩放与否,笔 的大小要跟着变;rnrn做笔记的是在PaintView上做,而显示PDF的是在ReaderView上做rnrnrnrn进入绘制逻辑后,特别是在放大状态时绘制笔记时,需要在已经缩放的ReaderView的状态值影响PaintView,让其画布大小和位置以及相
让并排的两个Div自适应高度(一样高)
 由于设计页面需要,要把两个并排显示的div实现一样高的效果,n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标。方法有以下几种:1、JS实现(判断2个div高);2、纯css方法;3、加背景图片实现。首先说下本博客实现的2个div一样高的方法(即js方法)。 rn rn    div+css基本布局: rn rn&amp;lt;div id=&quot;mm&quot;&amp;gt;&amp;lt;div ...
做 CSS 实现宽度和浏览器窗口宽度一样的正方形
n n n 方法1: 用 remn配合动态设置 html 根节点的 font-size 的 JS,使 浏览器窗口宽度 的值为 6.4rem;。n.tar {n width:6.4rem;n height:6.4rem;n}nn方法2: 用 vwn.tar {n width: 100vw;n height: 100vw;n}nn方法3: 用 pa...
JS中控制两个div的高度保持一致
<script type="text/javascript">n$(function(){nif($("#left").height() > $("#right").height()){n$("#right").css("height",$("#left").height());n}else{n$("#left").css("height",$("#right").height());n}n})n<
JS获取两个元素高度并且设定两个元素高度一致
function equityHeight(id1, id2) {n if (/\d/.exec(id2)[0] > indexElement) {n return;n }n sid1 = "td" + id1.toString();n sid2 = "td" + id2.toString();n if (document.getElementById(
css 实现image宽度百分百,高度跟宽度一样大小
前言:第一次写博客(不知道从何说起),希望以后再接再励。之前也遇到很多问题,有总结过,但是没有写出来(改天继续贴出其他总结),今天遇见css 实现image宽度百分百,高度跟宽度一样大小这个问题。贴出解决方案一个nn nn1、写两个div盒子,父子关系nn&amp;lt;div class=&quot;image&quot;&amp;gt;n&amp;lt;img :src=&quot;food.image&quot;&amp;gt;n&amp;lt;/div&amp;gt;nn2、...
css解决设置宽度百分比,高度跟宽度相等,防止内部图片抖动
1、前提:我的图片宽高比是1:1,在图片外层div高度未设置时(即使设置高度为100%,默认为内容的高度),运行程序会出现图片抖动的现象,代码如下:rnnnnnnnnn nnnnn*{padding:0; margin:0;}n.box{width:100%; font-size:0;}n.box img{width:100%; height:100%; }n.con{width:100%; h
表格锁定表头,并且表头宽度跟内容宽度对齐
因为业务需要,需要将列表的表头锁死所以在各种百度之后终于找到了解决方案。nn就是将表头跟内容分离开,用一个大的DIV包住 然后通过CSS将内容对齐,具体看代码nn1:htmlnnn&amp;lt;div class=&quot;sti-tbl-container&quot; &amp;gt;n &amp;lt;div class=&quot;sti-tbl-header&quot; style=&quot;padding-right:17p...
Androdi Dialog 设置宽度与屏幕宽度一样
网上的方法很杂,经过试验,确认一种可行的方案。下面是主要代码。nstyle:n n @color/whiten truen truen @nulln truen n代码:n final Dialog dialog = new Dialog(context, R.style.style_dialog);n dialog.se
Css样式实现元素宽度百分比,高度和宽度相等
移动端布局,有时候需要几个元素平分屏幕宽度,但是又想让该元素的高度和宽度相等,那么可以采用以下方式:rnn test div
前端面试题第一套
1.下列哪个样式定以后,内联(非块状)元素可以定义宽度和高度nA.display:inlinenB.display:nonenC.display:blocknD.display:inheritn2.新窗口打开网页,用到以下那个值nA._selfnB._blanknC._topnD._parentn3.下面有关js事件的响应,描述错误的是?nA.click鼠标点击某个事件nB.focus元素失去焦点
Web前端开发精品课HTML CSS JavaScript基础教程第十四章课后编程题答案
编程题:rn下面有一段代码,请在这段代码的基础上使用正确的选择器以及这两章学到的字体样式、文本样式来实现图14-13所示的效果。rnnnnn n n nnn 很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰,事实上这种”低水平的勤奋“远远比懒惰可怕。n n Remember: no pain,no gain!nnrn用VS2013新建ASP.NET空网站,添加新项,
(礼拜一log)前端开发:<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
td标签的colspan属性n两个div并排,一个宽度固定的实现方法
CSS图片宽度设置百分比 , 高度同宽度相同
CSS图片宽度设置百分比 , 高度同宽度相同
Web前端·简单粗暴的固定table表格宽度
table表格单元格的宽度是个很玄学的东西 nwidth固定的宽度总是不靠谱 n特别是跨行或者夸列合并单元格之后 n绝对不是一个width能驾驭了 n参考诸多方法之后 n想到了一个简单粗暴的方法 n简单来说就是 n首行隐藏、固定宽度 n下面我们来看代码nnhtml部分nn&amp;lt;table&amp;gt;n &amp;lt;!--第一组tr是用来固定宽度的,里面的td赋类名hide,稍后会隐藏--&amp;gt;n...
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度
一、先来大致了解下基本的信息rnrnrn上图时一张我从别人的博客中找到的,比较系统形象的展示了一些基本的信息。rn二、显示器的屏幕信息rnscreeen.height:屏幕分辨率的高rnscreen.width:屏幕分辨率的宽rn前面这两个数表示:屏幕宽高(屏幕像素)rn ---- 定值rnscreen.availHeight:屏幕可用高度(屏幕分辨率的高度-上下测任务栏的高度)rnscreen.
android 布局 中两个空格宽度与一个汉字宽度问题
在Strings.xml中用两个空格(&#160;&#160;)占一个汉字的宽度时,两个空格比一个汉字略窄,三个空格(&#160;&#160;&#160;)比一个汉字略宽 <string name="connection_status">密&#160;&#160;&#8201;码:</string><string name="password">密  码:</string> n<string n
<input>和<button>设置同样高度却不能等高
今天写了一个搜索框,就以简单的为例:<style>n *{margin: 0;padding: 0;}n div{background-color: #ccc;padding: 50px;}n form{width: 200px;position: relative;margin: 0 auto;}n input{width: 100px;height: 40
使用CSS定义一个和屏幕宽度一样正方形容器
介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器。
html中调用两个javascript文件里的函数但是函数名相同怎么办
html中调用两个javascript文件里的函数但是函数名相同怎么办 2010-2-1 21:46 提问者: phwd | 浏览次数:1049次由于现在没有分所以不好意思 有知道的高手请解答万分感谢解释器是按照函数定义的先后,后定义的覆盖先定义的。如果函数来自不同的文件,按文件被include的顺序来。 举例说有1.js和2.js,里面分别有fun()的函数定义。 如果html文件先inc
如何让ImageView高度和宽度保持一致?
问题描述n 不设置具体数字的高宽,如何让宽高值保持一致?n n <ImageViewn android:layout_width="wrap_content"n android:layout_height="wrap_content"n android:src="@drawable/image"/>n n 也就是说: n 竖屏下,height=w
当宽度为百分比时,如何让高度和宽度一样
当宽度为百分比时,如何让高度和宽度大小一样呢?.content li:before {n content:"";n display: inline-block;n padding-bottom: 100%;n}
入门
入门 nDescription n不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人。所以,他在桃花岛的唯一入口处修了一 n条小路,这条小路全部用正方形瓷砖铺设而成。有的瓷砖可以踩,我们认为是安全的,而有的瓷砖一踩上去就会有 n喷出要命的毒气,那你就死翘翘了,我们认为是不安全的。你只能从一块安全的瓷砖上走到与他相邻的四块瓷砖中 n的任何一个上,但它也必须是安全的才行。由于你是黄蓉的朋...
用【CSS】如何实现当盒子的宽度为百分比的时候,让盒子的高度始终等于盒子的宽度,保持正方形的状态
用CSS轻松实现,当盒子的宽度为百分比时,让盒子的高度和宽度始终相等,保持正方形状态,实现页面自适应
js高度宽度自适应
1.根据浏览器大小DIV自适应,首先我们需要获取浏览器的高度和宽度。nnnvar autoWidth;nvar autoHeight;nfunction autodivsize(){n //函数:获取尺寸 //获取浏览器窗口高度n if (window.innerHeight)n autoHeight = window.innerHeight;n else i...
下拉框和文本框宽度不一致
n       &amp;lt;input name=&quot;name&quot;  type=&quot;text&quot; class=&quot;w150&quot; /&amp;gt;        &amp;lt;select name=&quot;name&quot; size=&quot;1&quot;  class=&quot;w150&quot; &amp;gt;&amp;lt;/select&amp;gt;rnw150样式 如下rnw150{width:150px;}rn以前代码虽
jQuery/JavaScript 计算字符串显示宽度/高度
代码来源是u012860063的这篇文章https://blog.csdn.net/u012860063/article/details/53105658。我将其封装为一个函数,并实现了删除临时DIV的功能,然后对其中不知要的参数做了默认值,最后实现了自定义临时DIV的ID功能以避免可能的ID冲突。nn用途:做网页自定义右键菜单的时候,尤其是其中有动态添加的项目的时候,可以根据字符串设置菜单的宽度...
Android GridView设置item的高度与宽度相等、GridView条目宽高相同
自定义View,继承RelativeLayout或者LinearLayout,重写onMeasure()方法,代码如下:rnpublic class SquareLayout extends RelativeLayout {nn public SquareLayout(Context context, AttributeSet attrs, int defStyle) {n s
下拉二级菜单宽度占满文档显示区
用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)rn这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽;一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图,如下:rnrn在这个案例主要用到的知识有:设置定时器,清除定时器,mouse...
自定义高度与宽度都相等的RelativeLayout
自定义高度与宽度都相等的RelativeLayout。nGridView的item是正方形,而android需要适配不同尺寸的手机,所以不能写死item的高度和宽度。因为GridView是可以根据numColumns来分配item的宽度的,所以我们把item布局的高度设为与宽度一样就能实现适配了。
解决Input与Select设置CSS宽度相同时显示宽度不同的解决!
首先在标准兼容模式IE和firefox是一样的,在设成同一个高度或宽度的时候,显示的input和select不一样宽,也不一样高。nn在IE上,还没想到好的解决方法,如果是Firefox,则网上找到以下方法处理处理nninput, select{n  box-sizing: border-box;n  -moz-box-sizing: border-box;n  -webkit-box-sizin...
两个div,知道其中一个div的高度或宽度,怎么使另一个div占满剩余的部分.
解法之一:如下例子(以占满整个高度为例  ):&amp;lt;div calss = &quot;ab&quot;&amp;gt;        &amp;lt;div class=&quot;a&quot;&amp;gt;div元素a&amp;lt;/div&amp;gt;        &amp;lt;div class=&quot;b&quot;&amp;gt; div元素b&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;      &amp;lt;style&amp;
设置table中的td宽度不同
类似站内短信的形式的一个table,想要的实现结果如下格式:刚开始觉得“这里是名字”的td设置宽度为20%就可以了,代码如下: <table>n <tr class="messageTrU">n <td width="20%">这里是名字</td>n <td>n 割发代首过水电费和东莞市的分公司的分公司的分公司的
L298N 原理图+PCB全套!
这个和淘宝上买的一样,只是我把元件改为DIP元件!方便DIY! 这个和淘宝上买的一样,只是我把元件改为DIP元件!方便DIY!
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 网页diy制作教程 网页diy制作教程视频

相似问题

2
javascript 两个DIY一样的宽度。
3
javascript语言怎么实现一个文本框从一个页面导入到另一个页面?
2
javascript怎么实现箭头的界面,不是实现箭头函数,而是桃宝那种状态箭头?
3
初学javascript 循环语句的写法。
4
如何利用javascript语言的ajax功能实现从后台调用前台的变量并且做出判断?
2
怎么javascript实现访问的网站自动添加到主页和收藏夹的功能不需要提示用户
3
javascript语言怎么能够对后台的数组型(非字符串)实现split一样的功能?
3
怎么利用javascript语言实现调用后台的一个语句里的一个变量并且显示的功能?
2
javascript怎么实现调用api的功能,api调用功能的语句的格式是怎么样的?
1
javascript怎么实现判断用户的计算机是否已经处于开机的状态了呢?如何判断状态?
2
请问怎么利用javascript实现电子计算机远程开机和关机的功能?定时开机怎么实现?
1
javascript 点击改变 class 名
2
javascript 点击改变 class 名
1
javascript多维数据数组的转换是怎么进行循环和判断的,怎么直接判断转换以后的字符串?
1
javascript怎么实现对onekey ghos的调用。而且需要制定分区的参数,怎么设置?
1
javascript语言怎么实现通过gho文件的下载、更换操作系统
1
javascript 当数字为空的时候 标签样式为display:none
1
简单javascript的问题请教,怎么利用javascrip这个工具实现表达式求值运算?
7
如何让头部加载的javascript ,取消加载
2
javascript怎么实现网站的判断的功能,拿到一个界面以后如何返回判断界面的做法?