Element.js

Creates a new element of the type passed in.

Arguments

Props

the key styles will be used as setStyles, the key events will be used as addEvents. any other key is used as setProperty.

Example

new Element('a', {
    'styles': {
        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function(){
            //aaa
        },
        'mousedown': function(){
            //aaa
        }
    },
    'class': 'myClassSuperClass',
    'href': 'http://mad4milk.net'
});

Inserts the Element before the passed element.

Parameteres

Example

html:
<div id="myElement"></div>
<div id="mySecondElement"></div>
js:
$('mySecondElement').injectBefore('myElement');
resulting html:
<div id="mySecondElement"></div>
<div id="myElement"></div>

Same as Element.injectBefore, but inserts the element after.

Same as Element.injectBefore, but inserts the element inside.

Inserts the passed element inside the Element.  Works as Element.injectInside but in reverse.

Parameteres

Removes the Element from the DOM.

Example

$('myElement').remove() //bye bye

Clones the Element and returns the cloned one.

Returns

the cloned element

Example

var clone = $('myElement').clone().injectAfter('myElement');
//clones the Element and append the clone after the Element.

Replaces the Element with an element passed.

Parameteres

Returns

the passed in element

Example

$('myOldElement').replaceWith($('myNewElement')); //$('myOldElement') is gone, and $('myNewElement') is in its place.

Appends text node to a DOM element.

Arguments

Example

<div id="myElement">hey</div>
$('myElement').appendText(' howdy'); //myElement innerHTML is now "hey howdy"

Tests the Element to see if it has the passed in className.

Returns

<div id="myElement" class="testClass"></div>
$('myElement').hasClass('testClass'); //returns true

Adds the passed in class to the Element, if the element doesnt already have it.

Arguments

Example

<div id="myElement" class="testClass"></div>
$('myElement').addClass('newClass'); //<div id="myElement" class="testClass newClass"></div>

works like Element.addClass, but removes the class from the element.

Adds or removes the passed in class name to the element, depending on if it’s present or not.

Arguments

Example

<div id="myElement" class="myClass"></div>
$('myElement').toggleClass('myClass');
<div id="myElement" class=""></div>
$('myElement').toggleClass('myClass');
<div id="myElement" class="myClass"></div>

Sets a css property to the Element.

Arguments

Example

$('myElement').setStyle('width', '300px'); //the width is now 300px

Applies a collection of styles to the Element.

Arguments

Examples

$('myElement').setStyles({
   border: '1px solid #000',
   width: '300px',
   height: '400px'
});

OR

$('myElement').setStyles('border: 1px solid #000; width: 300px; height: 400px;');

Sets the opacity of the Element, and sets also visibility == “hidden” if opacity == 0, and visibility = “visible” if opacity > 0.

Arguments

Example

$('myElement').setOpacity(0.5) //make it 50% transparent

Returns the style of the Element given the property passed in.

Arguments

Example

$('myElement').getStyle('width'); //returns "400px"
//but you can also use
$('myElement').getStyle('width').toInt(); //returns "400"

Returns

the style as a string

Returns an object of styles of the Element for each argument passed in.  Arguments: properties - any number of style properties Example:

$('myElement').getStyles('width','height','padding');
//returns an object like:
{width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

Attaches an event listener to a DOM element.

Arguments

Example

$('myElement').addEvent('click', function(){alert('clicked!')});

Works as Element.addEvent, but instead removes the previously added event listener.

removes all events of a certain type from an element. if no argument is passed in, removes all events.

executes all events of the specified type present in the element.

Returns the previousSibling of the Element, excluding text nodes.

Example

$('myElement').getPrevious(); //get the previous DOM element from myElement

Returns

the sibling element or undefined if none found.

Works as Element.getPrevious, but tries to find the nextSibling.

Works as Element.getPrevious, but tries to find the firstChild.

Works as Element.getPrevious, but tries to find the lastChild.

returns the $(element.parentNode)

returns all the $(element.childNodes), excluding text nodes.  Returns as Elements.

Sets an attribute for the Element.

Arguments

Example

$('myImage').setProperty('src', 'whatever.gif'); //myImage now points to whatever.gif for its source

Sets numerous attributes for the Element.

Arguments

Example

$('myElement').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'
});
<img src="whatever.gif" alt="whatever dude">

Sets the innerHTML of the Element.

Arguments

Example

$('myElement').setHTML(newHTML) //the innerHTML of myElement is now = newHTML

Gets the an attribute of the Element.

Arguments

Example

$('myImage').getProperty('src') // returns whatever.gif

Returns

the value, or an empty string

Returns the tagName of the element in lower case.

Example

$('myImage').getTag() // returns 'img'

Returns

The tag name in lower case

scrolls the element to the specified coordinated (if the element has an overflow)

Arguments

Example

$('myElement').scrollTo(0, 100)

Returns the value of the Element, if its tag is textarea, select or input. getValue called on a multiple select will return an array.

return an Object representing the size/scroll values of the element.

Example

$('myElement').getSize();

Returns

{
    'scroll': {'x': 100, 'y': 100},
    'size': {'x': 200, 'y': 400},
    'scrollSize': {'x': 300, 'y': 500}
}

Returns the real offsets of the element.

Example

$('element').getPosition();

Returns

{x: 100, y:500};

Returns the distance from the top of the window to the Element.

Returns the distance from the left of the window to the Element.

Returns an object with width, height, left, right, top, and bottom, representing the values of the Element

Example

var myValues = $('myElement').getCoordinates();

Returns

{
    width: 200,
    height: 300,
    left: 100,
    top: 50,
    right: 300,
    bottom: 350
}