ansaurus

Question

detecting true border, padding and margin from Javascript

Answer 1

+2 A:

It's possible, but of course, every browser has its own implementation. Luckily, PPK has done all the hard work for us:

http://www.quirksmode.org/dom/getstyles.html

I.devries 2008-12-08 12:39:40

Answer 2

A:

You can adapt javascript code from mioplanet, where the resulting size of the website is calculated:

http://docs.mioplanet.com/get_web_page_size.php

joki 2008-12-08 12:48:59

Answer 3

+2 A:

You should use a library like JQuery to provide you these values.

http://docs.jquery.com/CSS/outerWidth http://docs.jquery.com/CSS/outerHeight

Ballsacian1 2009-05-18 05:27:55

Answer 4

+1 A:

With jQuery : get padding + borders of an element, write:

var wPadding = $(element).outerWidth() - $(element).width();
var hPadding = $(element).outerHeight() - $(element).Height();

or your way (but you have to state paddingLeft, paddingRight..not just 'padding' ):

<html>
<head>
    <style>
    .some_class { padding:0 0 0 20px; border: 2px solid green; }       
    </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

   <script>
    <!--
    function showDetails()
    {
            var elem = $("#my_div");
            alert("elem.className=" + elem[0].className);
            alert("elem.style.padding=" + elem.css("paddingLeft") );
    }
    -->
    </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>

vsync 2009-08-14 23:54:24

ansaurus

tags:

views:

answers:

detecting true border, padding and margin from Javascript

related questions