program story

JavaScript를 사용하여 요소의 패딩 값을 얻는 방법은 무엇입니까?

inputbox 2020. 12. 29. 07:03
반응형

JavaScript를 사용하여 요소의 패딩 값을 얻는 방법은 무엇입니까?


나는이 textarea내 HTML에. 정수 또는 부동 소수점으로 패딩 숫자 값을 픽셀 단위로 가져와야합니다. JavaScript를 사용하여 어떻게 얻을 수 있습니까? jQuery를 사용하지 않으므로 순수한 JavaScript 솔루션을 찾고 있습니다.


다음 padding-left을 반환합니다 .

window.getComputedStyle(txt, null).getPropertyValue('padding-left')

txtTEXTAREA 요소에 대한 참조는 어디에 있습니까 ?

위의 내용은 모든 최신 브라우저와 IE9에서 작동합니다. 그러나 IE8 이하에서는 작동하지 않습니다.

라이브 데모 : http://jsfiddle.net/simevidas/yp6XX/

추가 정보 : https://developer.mozilla.org/en/DOM:window.getComputedStyle


Btw는 비교를 위해 jQuery를 사용하여 동일한 작업을 수행하는 방법입니다.

$(txt).css('padding-left')

위의 내용은 IE6-8에서 작동합니다.


검색 후이 리소스 를 찾아서 원하는 작업을 수행했습니다.

그들은 당신이 자바 스크립트 기능을 추가하기를 원합니다.

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

그런 다음 다음과 같은 함수를 호출하여 특정 스타일을 얻습니다.

getStyle(document.getElementById("container"), "padding-right");

여기서 "container"는 요소의 ID이고 "font-size"는 속성 이름입니다. 요소의 모든 CSS가 인라인임을 보장 할 수 있다면이 솔루션이 더 깔끔 할 것입니다.

document.getElementById("container").style.paddingRight;

참조 URL : https://stackoverflow.com/questions/5227909/how-to-get-an-elements-padding-value-using-javascript

반응형