Dimensions Example

This simple example shows you how to get the dimensions of an element. Here, we create a new element with some dimensions, including width, height, padding, and borders. Then, we get those properties from the element using Jude's Dimension getters.

dimensions DIV
dimensions DIV
dimensions DIV
dimensions DIV
dimensions DIV
dimensions DIV

width: 100
vertical padding: 20
horizontal padding: 20
vertical borders: 10
horizontal borders: 40

Basic Source Code

This is a simplified set of code; view the actual source code to see everything that's going on.

        jude.onload = function() {

            example = E( "<DIV>", 10, 0, 100, 100 ).appendTo() ;
            example.wH(
                "dimensions DIV<br />" +
                "dimensions DIV<br />" +
                "dimensions DIV<br />" +
                "dimensions DIV<br />" +
                "dimensions DIV<br />" +
                "dimensions DIV"
            );
            example.style.padding = "10px" ;
            example.style.borderTop = example.style.borderBottom
                = "5px solid #396" ;
            example.style.borderLeft = example.style.borderRight
                = "20px solid #009" ;
            example.style.background = "#eee" ;
            example.boxFix() ;

            results = E( "<DIV>", 190, 0 ).appendTo() ;
            results.wH( 
                "width: " + example.gW() + "<br />" +
                "vertical padding: " + example.gPV() + "<br />" +
                "horizontal padding: " + example.gPH() + "<br />" +
                "vertical borders: " + example.gBV() + "<br />" +
                "horizontal borders: " + example.gBH()
            );

        };