这是我的代码,它不工作。联系我们
<div class=“footerA”> aaaa </div> <div class=“footerB”></div>
字符串Jquery
$(‘.footerA’).on(‘resize’,function(){ $(‘.footerB’).css(‘width’, $(‘.footerA’).width()) })
型我期望footerB的宽度在footerA的宽度改变时改变。当我展开/缩小浏览器时,更改意味着。但它不起作用。请帮帮我
ntjbwcob1#
如果你想要一个JS解决方案,请看这里:不能将“resize”绑定到元素,而是使用ResizeObserver还要注意,你应该使用一些内联类型的元素/样式。div元素默认为display: block,因此我添加了display: inline-block;来说明这一点。在代码片段中,我将#footerA设置为可编辑(类似于输入),以便您可以更改div的内容。
ResizeObserver
div
display: block
display: inline-block;
#footerA
const footerA = document.getElementById("footerA"); const footerB = document.getElementById("footerB"); const resizeObserverCallback = () => { footerB.style.width = `${footerA.getBoundingClientRect().width}px`; } if (footerA && footerB) { new ResizeObserver(resizeObserverCallback).observe(footerA) }
.footer { background-color: orange; display: inline-block; }
<div id="footerA" class="footer" contenteditable="true">aaaa</div> <div id="footerB" class="footer">bb</div>
此问题可能与this question重复
1条答案
按热度按时间ntjbwcob1#
如果你想要一个JS解决方案,请看这里:
不能将“resize”绑定到元素,而是使用
ResizeObserver
还要注意,你应该使用一些内联类型的元素/样式。
div
元素默认为display: block
,因此我添加了display: inline-block;
来说明这一点。在代码片段中,我将
#footerA
设置为可编辑(类似于输入),以便您可以更改div
的内容。此问题可能与this question重复