css : 요소에서 사용하지 않는 값에 액세스하는 방법?

Question

별도의 스타일 시트에서 CSS 클래스의 높이를 얻는 DIV가 있습니다. 하지만 그 높이는 때로는 자바 스크립트에서 변경됩니다. 새 요소를 만들지 않고 CSS 높이를 스타일 시트에서 직접 읽을 수 있습니까?

Answer 1

당신이 뭔가를 할 수 있습니다.

Answer 2

아니요, CSS에서 속성을 읽을 수 없습니다.

style을 요소에 적용하는 대신 CSS 파일에서 height을 변경할 수있는 것보다 CSS 파일을 JavaScript에서 직접 변경할 수있는 백엔드 API를 만들 수 있습니다.

Answer 3

높이 변경이 알려진 원인에 의해 시작되면 가능합니다.

먼저 현재의 인라인 높이/클래스 이름을 저장하십시오. 그런 다음 class/height 속성을 다시 설정하십시오. 그런 다음 window.getComputedStyle 메서드를 사용하여 현재 높이를 읽습니다. 마지막으로 클래스/높이 속성을 복원합니다. 높이가 인라인 height 속성을 설정하여 변경되기 때문에 클래스 이름을 제거 할 필요가 없다고 가정 해 봅시다. 다음 :

내가 jsfiddle.net에 대한 예제를 만들어

var myDiv = $("#myId"); 
alert('initial height from css is: ' + myDiv.css("height")); 

myDiv.css("height","50px"); 
alert('height modified by js is: ' + myDiv.css("height")); 

// store modified height value 
var height = myDiv.css("height"); 

// set height to an invalid value 
myDiv.css("height",""); 

alert('height is now retrieved from css again: ' + myDiv.css("height")); 

// restore height value 
myDiv.css("height",height); 

, 당신이 그것을 here를 볼 수 있습니다

function getCSSheight(elem) { 
    var style = window.getComputedStyle(elem, null); 
    return style.getPropertyValue("height"); //Returns 222px; 
    // Optionally: Use parseFloat to convert the `22px` to `22`. 
}