Inline JavaScript
Here is a cheat sheet of inline JS that I use frequently:
Cursor Change cursor (inline)
onmouseover=”this.style.cursor = ‘pointer’;”
onmouseover=”this.style.cursor = ‘pointer’;”
Border change border (inline)
onmouseover=”this.style.borderColor=’#000000′”
onmouseover=”this.style.borderColor=’#000000′”
The version below adds a 2 px border, but compensates for the added pixels by reducing the dimensions of the DIV. This is helpful when you want to add a border to an image, but don’t want it to push the other elements around it. Unfortunately, since there is padding added to the DIV, it does adjust the contents of the DIV when the dimensions are changed.
this.style.borderWidth=’2px’;this.style.width=’196px’;this.style.height=’26px’;
this.style.borderWidth=’2px’;this.style.width=’196px’;this.style.height=’26px’;
this.src (gets the src value which is usually a path to an image)
this.parentNode.id (gets the id of the parent element)
this.firstChild.id (gets the id of the first child element. FYI. There cannot be any whitespace at the beginning of the contents of the element that’s calling this, or it will consider the whitespace the first child.)
offsetWidth (gets the width of an element. FYI. It adds padding and borders to the total)
offsetHeight (gets the height of an element. FYI. It adds padding and borders to the total)
Here’s a link to a list of a lot of the DOM Element Properties.
http://www.javascriptkit.com/domref/elementproperties.shtml
Categories: JavaScript