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.

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()
            );

        };