KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
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.
Tags (comma-separated)
Save Edits
Cancel