您可以使用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設置元素的大小

回答

相關問題