detecting true border, padding and margin from Javascript
Question
Is there a way to detect the true border, padding and margin of elements from Javascript code? If you look at the following code:
<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>
you can see, if you click the button, that the padding is not reported right. Only the properties defined directly through "style" are reported back, those defined through a CSS class are not reported.
Is there a way to get back the final values of these properties? I mean the values obtained after all CSS settings are computed and applied by the browser.
3 answers
solution1
10 2013-02-28 02:51:42
the style property can get the styles that are assigned inline like
<div id="target" style="color:#ddd;margin:10px">test</div> if you want to get the styles assigned in outer css file or <style/> element, try this:
var div = document.getElementById("target");
var style = div.currentStyle || window.getComputedStyle(div);
display("Current marginTop: " + style.marginTop);
if you are using jQuery, @vsync 's solution is fine.
solution2
7 2009-08-14 23:54:24
With 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>
Your way (but you have to state paddingLeft, paddingRight..not just 'padding' ):
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>
solution3
6 ACCPTED 2008-12-08 12:39:40
It's possible, but of course, every browser has its own implementation. Luckily, PPK has done all the hard work for us:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.