Question

我有一个按钮，可以在鼠标输入事件中调整大小。我想知道是否可以根据从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设置为按钮的样式高度会产生一个奇怪的偏移量，因此在这种情况下对我来说不是一个可行的解决方案

Answer 1

我对此代码感到困惑。您正在检查刚刚从getBoundingClientRect获得的高度是否等于getBoundingClientRect的高度，当然它总是如此。不，您可以通过更新调用getBoundingClientRect所获得的大小的信息来改变某些内容的大小。无论如何，如果你真的想在JS中做一些与悬停有关的事情，你需要使用mouseenter和mouseleave，而不是mouseover。

但实际上，你应该能够在CSS中完全做到这一点。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 = '';
});

＆＃13;

button { width: 240px; }

＆＃13;

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

＆＃13;

可以使用getBoundingClientRect设置元素的大小

1 个答案: