getBoundingClientRect를 사용하여 요소의 크기를 설정할 수 있습니까?

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 줄에서 하나로 이동해도 마우스 오버시 전체 단추의 크기가 조정되지 않습니다.

은 또한 버튼의 스타일 높이 h에서 높이를 설정하는 것은 그래서 정말이 코드에 의해 내가 혼란 스러워요이 시나리오

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>