« Back to the index
WA.get, direct access to CSS examples
There are some basic methods to access most common CSS properties:
WA.get.CSSwidth(value) : apply the value to the width of each node. it must be a valid CSS measure.
+ WA.get.CSSwidth() : returns the CSS width of the FIRST DOM node found.
WA.get.CSSheight(value) : apply the value to the height of each node. it must be a valid CSS measure.
+ WA.get.CSSheight() : returns the CSS height of the FIRST DOM node found.
WA.get.CSSleft(value) : apply the value to the left of each node. it must be a valid CSS measure.
+ WA.get.CSSleft() : returns the CSS left of the FIRST DOM node found.
WA.get.CSStop(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSStop() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSmargin(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSmargin() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSpadding(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSpadding() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSborder(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSborder() : returns the CSS top of the FIRST DOM node found.
WA.get.CSScolor(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSScolor() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSbgcolor(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSbgcolor() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSbg(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSbg() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSfont(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSfont() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSdisplay(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSdisplay() : returns the CSS top of the FIRST DOM node found.
WA.get.CSSopacity(value) : apply the value to the top of each node. it must be a valid CSS measure.
+ WA.get.CSSopacity() : returns the CSS top of the FIRST DOM node found.
There is also a generic method to access any other CSS properties:
WA.get.css(param, value) : apply the value to the specified parameter of each node.
+ WA.get.css(param) : returns the value of the parameter of the FIRST DOM node found.
Let's play with some objects sizes:
function test1()
{
var w = WA.get("#d1").CSSwidth();
WA.get("#metrics1").append('d1 (red) CSS width is ' + w + '. Lets put it to 200px.<br />');
WA.get("#d1").CSSwidth('200px');
var h = WA.get("#d2").CSSheight();
WA.get("#metrics1").append('d2 (green) CSS height is ' + h + '. Lets put it to 100px.<br />');
WA.get("#d2").CSSheight('100px');
var l = WA.get("#d3").CSSleft();
WA.get("#metrics1").append('d3 (blue) CSS left is ' + l + '. Lets put it to 200px.<br />');
WA.get("#d3").CSSleft('200px');
var t = WA.get("#d4").CSStop();
WA.get("#metrics1").append('d4 (orange) CSS top is ' + t + '. Lets put it to 0px.<br />');
WA.get("#d4").CSStop('0px');
}
Show the result
Let's play with some objects borders and margins:
function test2()
{
var m = WA.get("#d21").CSSmargin();
WA.get("#metrics2").append('d21 (red) CSS margin is ' + m + '. Lets put it to 5px.<br />');
WA.get("#d21").CSSmargin('5px');
var h = WA.get("#d22").CSSpadding();
WA.get("#metrics2").append('d22 (green) CSS padding is ' + h + '. Lets put it to 5px.<br />');
WA.get("#d22").CSSpadding('5px');
var l = WA.get("#d23").CSSborder();
WA.get("#metrics2").append('d23 (blue) CSS border is ' + l + '. Lets put it to 5px solid black.<br />');
WA.get("#d23").CSSborder('5px solid black');
}
Show the result
Let's play with some objects colors:
function test3()
{
var w = WA.get("#d31").CSScolor();
WA.get("#metrics3").append('d31 (red) CSS color is ' + w + '. Lets put it to white.<br />');
WA.get("#d31").CSScolor('white');
var h = WA.get("#d32").CSSbgcolor();
WA.get("#metrics3").append('d32 (green) CSS background color is ' + h + '. Lets put it to black.<br />');
WA.get("#d32").CSSbgcolor('black');
var l = WA.get("#d33").CSSbg();
WA.get("#metrics3").append('d33 (blue) CSS background is ' + l + '. Lets put it to transparent and a blue border.<br />');
WA.get("#d33").CSSbg('transparent').CSSborder('blue 1px solid');
}
Show the result
Let's play with some other CSS objects properties:
function test4()
{
var w = WA.get("#d41").CSSfont();
WA.get("#metrics4").append('d41 (red) CSS font is ' + w + '. Lets put it to 14px Arial bold.<br />');
WA.get("#d41").CSSfont('bold 14px Verdana');
var h = WA.get("#d42").CSSdisplay();
WA.get("#metrics4").append('d42 (green) CSS display is ' + h + '. Lets put it to none.<br />');
WA.get("#d42").CSSdisplay('none');
var l = WA.get("#d43").CSSopacity();
WA.get("#metrics4").append('d43 (blue) CSS opacity is ' + l + '. Lets put it to 50%.<br />');
WA.get("#d43").CSSopacity('50');
var t = WA.get("#d43").css('z-index');
WA.get("#metrics4").append('d43 (blue) CSS zIndex is ' + t + '. Lets put it to 100.<br />');
WA.get("#d43").css('z-index', '100');
}
Show the result
« Back to the index