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

我有一个按钮，可以在鼠标输入事件上调整大小。我想知道是否可以根据从getBoundingClientRect().height收到的高度来调整它的大小。您可以使用getBoundingClientRect设置元素的大小

这是我到目前为止已经有，但没有这样的变化试图似乎工作

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设置高度按钮的风格高度创建了一个奇怪的偏移，因此，这不是真的，我在这种情况下

来源

2017-04-26 Chris Hutchison

如果你想想看，'GET'表明，正确，你不能'设置' –

我意识到，当我张贴它大声笑，但有一个类似的功能somet像setBoundingClientRect（）可以改变按钮的大小？ –

不，你会使用其他属性（.style。???）来操作元素 –

这段代码可行的解决方案我很困惑。您正在检查刚刚从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>

来源

2017-04-26 02:41:08

是的，但是当元素中有文本并且宽度增加时，文本将从2行变为一行使高度缩小，因此我检查高度是否缩小，因为文本已调整大小然后将按钮调整为原始高度 –

为什么不把高度固定到你想要的高度？ – 2017-04-26 02:44:29

，因为我希望宽度在mouseover上调整大小，并且我创建了多个元素，我不想要这个大小，只有那些因为文本从多行更改为一个而调整大小的元素 –

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

回答

相关问题