相关疑难解决方法(0)

我喜欢对 HTML 文档中 SVG 元素的大小变化做出反应。经过一番研究，我发现 ResizeObserver API 旨在侦听有关给定 HTML 或 SVG 元素的此类更改（stackoverflow、MDN）。不幸的是，我无法让它适用于 SVG 元素。

我的示例包含一个 DIV 元素、一个 SVG 元素以及每个元素的 ResizeObserver：

const svg = document.querySelector('#svg')
const svgInfo = document.querySelector('#svg-info')
const div = document.querySelector('#div')
const divInfo = document.querySelector('#div-info')

const svgObserver = new ResizeObserver(() => {
  svgInfo.textContent = svg.clientWidth
})
svgObserver.observe(svg)
const divObserver = new ResizeObserver(() => {
  divInfo.textContent = div.clientWidth
})
divObserver.observe(div)

<svg id="svg" style="background-color: red; width: 100%; height: 50px"></svg>
<div id="svg-info">initial</div>
<div id="div" style="background-color: blue; width: 100%; …

我可以使用MutationObserver来监听计算样式的变化吗？我有一个宽度为100%的div,我想知道它的计算宽度何时发生变化,但到目前为止还没有成功.如果我务实地更改样式,MutationObserver会起作用:

document.getElementById("myDiv").style.width = "200px"

但是,如果通过窗口调整大小或父div重新调整大小来调整接口大小,则它不起作用.

任何不涉及超时的解决方案？

更新:我对一个也不会涉及监听窗口调整大小事件的解决方案特别感兴趣,因为有时界面会在没有调整窗口大小的情况下发生变化.例如,具有宽度百分比和父节点大小的div更改.

看一下这个例子：https : //jsfiddle.net/vxun2Lgg/2/

我在containerdiv 上附加了“调整大小”事件监听器。打开开发工具并修改的宽度后container，不会调用resize回调。我想念什么？

PS：我对窗口调整大小事件不感兴趣，仅对containerdiv 感兴趣。

的HTML：

<div class="container"></div>

js：

var container = document.getElementsByClassName("container")[0];
container.addEventListener("resize",function(){console.log("resizing")});

编写了一个 Angular 13 组件，每当窗口大小调整时，它都会在 div 中绘制一些内容。

问题是获取 div 的渲染宽度。如果我不使用 setTimeout() 并延迟 170 毫秒，this.treemap.nativeElement.offsetWidth则为零。

由于树形图必须在每次调整窗口大小时重新渲染，我还尝试从 ngAfterViewInit() 调度窗口调整大小事件，但它似乎也发生得太快（所以再次this.treemap.nativeElement.offsetWidth为零）。

模板的相关部分...

  <div #treemap class="treemap col-12"></div>

和缩写代码...

// Details omitted for brevity
export class TreemapComponent implements AfterViewInit {
  @ViewChild('treemap') treemap!: ElementRef

  @HostListener('window:resize', ['$event'])
  private render() {
    const width = this.treemap.nativeElement.offsetWidth
    // code that successfully renders a treemap in the div as long as width != 0
  }

  callHack(): void {
    setTimeout(() => this.render(), 170) // testing shows 170ms is lowest possible …

我是 javascript 新手，我想在 div 更改时执行一些操作

在 jquery 中，我使用这段代码

var width = $(window).width();
$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
   }
});

但我想使用 javascript 来完成它，请帮助我......