Home > JavaScript > Inline JavaScript

Inline JavaScript

Here is a cheat sheet of inline JS that I use frequently:

Cursor Change cursor (inline)
onmouseover=”this.style.cursor = ‘pointer’;”
Border change border (inline)
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.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
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.