JavaScript에서 진정한 테두리, 패딩 및 마진을 감지합니다
-
20-08-2019 - |
문제
JavaScript 코드에서 실제 테두리, 패딩 및 요소 마진을 감지하는 방법이 있습니까? 다음 코드를 보면 :
<html>
<head>
<style>
<!--
.some_class {
padding-left: 2px;
border: 2px solid green;
}
-->
</style>
<script>
<!--
function showDetails()
{
var elem = document.getElementById("my_div");
alert("elem.className=" + elem.className);
alert("elem.style.padding=" + elem.style.padding);
alert("elem.style.paddingLeft=" + elem.style.paddingLeft);
alert("elem.style.margin=" + elem.style.margin);
alert("elem.style.marginLeft=" + elem.style.marginLeft);
alert("elem.style.border=" + elem.style.border);
alert("elem.style.borderLeft=" + elem.style.borderLeft);
}
-->
</script>
</head>
<body>
<div id="my_div" class="some_class" style="width: 300px; height: 300px; margin-left: 4px;">
some text here
</div>
<button onclick="showDetails();">show details</button>
</body>
</html>
버튼을 클릭하면 패딩이 제대로보고되지 않았 음을 알 수 있습니다. "스타일"을 통해 직접 정의 된 속성 만 다시보고되며 CSS 클래스를 통해 정의 된 속성은보고되지 않습니다.
이 속성의 최종 값을 되 찾는 방법이 있습니까? 모든 CSS 설정 후 얻은 값은 브라우저에서 계산되고 적용됩니다.
해결책
가능하지만 물론 모든 브라우저에는 자체 구현이 있습니다. 운 좋게도 PPK는 우리를 위해 모든 노력을 기울였습니다.
다른 팁
그만큼 style
속성은 인라인으로 할당 된 스타일을 얻을 수 있습니다.
<div id="target" style="color:#ddd;margin:10px">test</div>
OUTER CSS 파일에 할당 된 스타일을 얻으려면 <style/>
요소, 이것을 시도하십시오 :
var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);
jQuery를 사용하는 경우 @vsync의 솔루션은 괜찮습니다.
jQuery와 함께 :
var $elm = $('.box');
var hPadding = $elm.outerWidth() - $elm.width();
var vPadding = $elm.outerHeight() - $elm.height();
var hBorder = $elm.outerWidth() - $elm.innerWidth();
var vBorder = $elm.outerHeight() - $elm.innerHeight();
console.log("Horizontal padding & border: ", hPadding);
console.log("Vertical padding & border: ", vPadding);
console.log("Horizontal border: ", hBorder);
console.log("Vertical border: ", vBorder);
.box{
width: 50%;
padding:10vw;
border:10px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
당신의 길 (그러나 당신은 paddingleft, paddingright .. 단지 '패딩'이 아니라 paddingleft를 진술해야합니다) : :
var elm = $('.box');
console.log("padding left (PX): ", elm.css("paddingLeft"));
.box {
padding:0 50px 0 5vw;
border: 2px solid green;
width: 300px;
height: 300px;
margin-left: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">some text here</div>
제휴하지 않습니다 StackOverflow