你可以使用getBoundingClientRect来设置元素的大小吗？

Question

你可以使用getBoundingClientRect来设置元素的大小吗？

4

我有一个按钮，它会在鼠标进入事件时进行调整大小。我想知道是否可以根据从 getBoundingClientRect().height 接收到的高度来调整大小。

到目前为止，我尝试了以下方法，但似乎都不起作用：

btn.onmouseover = function(){
    let h = this.getBoundingClientRect().height;
    this.style.width = "100%"; 

    if(h != this.getBoundingClientRect().height)
    {
        this.getBoundingClientRect().height = h;
    }

    this.style.right = "4%";
}

当鼠标悬停在按钮上时，由于其中的文本从两行移动到一行，按钮会调整大小。我想知道是否有一个类似于getBoundingClientRect()的函数调用，可以根据h获得的高度设置按钮的高度。这样，在鼠标悬停时，按钮内部的文本从2行变为1行不会调整整个按钮的大小。

此外，将h的高度设置为按钮的样式高度会创建奇怪的偏移量，因此在这种情况下这并不是一个可行的解决方案。

- Chris Hutchison

如果你仔细想想，get 的意思是你不能 set，这是正确的。 - Jaromanda X

不，您将使用其他属性（例如.style.??？）来操作该元素。 - Jaromanda X

你收到的高度是根据几个CSS属性计算出来的。设置高度是含糊不清的：你只想增加高度吗？缩放它？让边框变大？填充？边距？ - Sebastian Simon

由于按钮内的文本导致当宽度增加时按钮会变小，因此我正在尝试在鼠标悬停时保持按钮大小相同的高度，因此基本上是按比例缩放其在宽度增加之前的原始高度。 - Chris Hutchison

甚至更好的是，在按钮调整大小时是否可能保持文本位置不变？ - Chris Hutchison

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user663031 · Answer 1

我对这段代码感到困惑。您正在检查从getBoundingClientRect获取的高度是否等于getBoundingClientRect中的高度，当然它总是相等的。而且，通过更新从调用getBoundingClientRect获得的大小信息，您不可能改变某些东西的大小。无论如何，如果您真的想在JS中执行与悬停相关的操作，您需要使用mouseenter和mouseleave，而不是mouseover。

但实际上，您应该能够完全在CSS中完成此操作。

button { width: 200px; height: 3em; }
button:hover { width: 400px; }

<button>Hi, I'm a button with some pretty long text</button>

如果您真的想要自己处理鼠标事件，那么：

const button = document.querySelector('button');

button.addEventListener('mouseenter', () => {
  button.style.height = button.offsetHeight + 'px';
  button.style.width = '600px';
});
  
button.addEventListener('mouseleave', () => {
  button.style.width = button.style.height = '';
});

button { width: 240px; }

<button>Button with some pretty long text which will wrap</button>