« Back to the index
WA.get, Examples of nodes metrics
There are 4 methods to access the basic metrics of the nodes fetched by the get:
WA.get.width(): gets or set the width of the nodes. Contrary to the CSSwidth method that returns the style sheet size, this one will always return the real size in pixel of the node.
WA.get.height(): gets or set the height of the nodes. Contrary to the CSSheight method that returns the style sheet size, this one will always return the real size in pixel of the node.
WA.get.left(): gets or set the left position of the nodes. Contrary to the CSSleft method that returns the style sheet position, this one will always return the real position in pixel of the node.
WA.get.top(): gets or set the top position of the nodes. Contrary to the CSStop method that returns the style sheet position, this one will always return the real position in pixel of the node.
For the 4 methods, when a string is passed as parameter, the value is directly put into the style property, meanwhile any numeric value is added with 'px' at the end then sent to the property.
Let's play with some objects:
function test1()
{
// Let's modify some positions and sizes
// 1. 50px more to d1
var w1 = parseInt(WA.get('#d1').width(), 10);
WA.get('#d1').width( (w1 + 50) + 'px');
// 2. d2 fixed to 80px height
WA.get("#d2").height(80); // same as .height('80px');
// 3. d3 corner moved at 30%
WA.get("#d3").left('30%');
// 4. lets print the top of d4 in document and in example container
alert('Top of d4 (yellow) in document: '+WA.get('#d4').top()
+' and in example container: '+WA.get('#d4').top(undefined, WA.toDOM('test1')));
}
Show the result
« Back to the index