Мы уже знаем, как получать элементы DOM на странице, работать с массивами и обрабатывать события. Сейчас мы продолжим работать с элементами, научимся добавлять, изменять атрибуты, стили.

Конструктор

new Element

Создает экземпляр класса Element со всеми указанными параметрами - атрибутами, стилями, событиями.

var myAnchor = new Element('a', {
	'href': 'http://mootools.net',
	'class': 'myClass',
	'html': 'Кликни меня',
	'styles': {
		'display': 'block',
		'border': '1px solid black'
	},
	'events': {
		'click': function(){
			alert('clicked');
		},
		'mouseover': function(){
			alert('mouseovered');
		}
	}
});

Атрибуты

.get()

С помощью этой функции Вы можете получить любой из атрибутов элемента:

• id
• name
• value
• href
• src
• class
• text

var tag = $('myDiv').get('tag'); //возвращает "div"
var id = $('myDiv').get('id'); //возвращает "myDiv"
var value = $('myInput').get('value'); //возвращает значение элемента

.set()

В отличие от .get() функция задает значение атрибута .set() дает возможность динамически изменять параметры элемента в ответ на реакцию пользователя. Вы можете передавать в функцию пару атрибут-значение, массив пар, или объект Element, содержащий атрибуты, стили, события. Убедитесь в этом на примерах.

$('myElement').set('text', 'text goes here');
$('myElement').set('class', 'active');

var body = $(document.body).set('styles', {
	'font': '12px Arial',
	'color': 'blue'
});

var myElement = $('myElement').set({
	'styles': {
		'font': '12px Arial',
		'color': 'blue',
		'border': '1px solid #f00'
	},
	'events': {
		'click': function(){ alert('click'); },
		'mouseover': function(){ this.addClass('over') }
	},
	'id': 'documentBody'
});

Элементы

.erase()

Функция удаляет атрибут элемента.

$('myDiv').erase('id'); //удаляет id у myDiv.
$('myDiv').erase('class'); //удаляет class у myDiv.

.inject()

Для вставки элемента используется функция .inject(). В качестве параметра Вы указываете элемент и способ привязки к нему. Примеры:

var myFirstElement  = new Element('div', {id: 'myFirstElement'});
var mySecondElement = new Element('div', {id: 'mySecondElement'});
var myThirdElement  = new Element('div', {id: 'myThirdElement'});

<div id="myFirstElement"></div>
<div id="mySecondElement"></div>
<div id="myThirdElement"></div>

Вставка дочернего элемента (по умолчанию):

myFirstElement.inject(mySecondElement);

<div id="mySecondElement">
	<div id="myFirstElement"></div>
</div>

Вставка элемента-родителя:

myThirdElement.inject(mySecondElement, 'top');

<div id="mySecondElement">
	<div id="myThirdElement"></div>
	<div id="myFirstElement"></div>
</div>

Вставка перед элементом:

myFirstElement.inject(mySecondElement, 'before');

<div id="myFirstElement"></div>
<div id="mySecondElement"></div>

Вставка после элемента:

myFirstElement.inject(mySecondElement, 'after');

<div id="mySecondElement"></div>
<div id="myFirstElement"></div>

Таким образом, с помощью данной функции Вы можете вставить элемент в любое место страницы.

.appendText()

В отличие от предыдущей функции, .appendText() вставляет не элемент, а текст. Можно указывать место вставки, по умолчанию в конец.

<div id="myElement">Hey.</div>

$('myElement').appendText(' Howdy.');

<div id="myElement">Hey. Howdy.</div>

.dispose()

Удаляет элемент DOM.

<div id="myElement"></div>
<div id="mySecondElement"></div>

$('myElement').dispose(); 

<div id="mySecondElement"></div>

.clone()

Копирует элемент и возвращает копию.

.replaces()

Заменяет один элемент другим.

$('myNewElement').replaces($('myOldElement'));
//вместо $('myOldElement') имеем $('myNewElement')

Классы CSS

.hasClass()

Проверяет, содержится ли данный класс у элемента.

<div id="myElement" class="testClass"></div>

$('myElement').hasClass('testClass'); // возвращает true

.addClass()

Добавляет класс CSS элементу.

<div id="myElement" class="testClass"></div>

$('myElement').addClass('newClass');

<div id="myElement" class="testClass newClass"></div>

.removeClass()

Удаляет класс CSS.

<div id="myElement" class="testClass"></div>

$('myElement').addClass('newClass');

<div id="myElement" class="testClass newClass"></div>

.toggleClass()

В зависимости от того, содержит ли элемент класс CSS, функция удалит или добавит его.

<div id="myElement" class="myClass"></div>

$('myElement').toggleClass('myClass');

<div id="myElement" class=""></div>

$('myElement').toggleClass('myClass');

<div id="myElement" class="myClass"></div>

Стили

.setStyle()

Функция задает значение свойства CSS.

$('myElement').setStyle('width', '300px'); //ширина 300px.

.getStyle()

Возвращает значение свйства CSS.

$('myElement').getStyle('width'); //возвращает "300px".
$('myElement').getStyle('width').toInt(); //возвращает 300.

.getStyles() и .setStyles()

Для получения множества функций или установки нескольких стилей используйте .getStyles() и .setStyles().

$('myElement').getStyles('width', 'height', 'padding'); 

//возвращает массив {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

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

Подробное описание функций:
http://mootools.net/docs/Element
http://mootools.net/docs/Element/Element.Style

Имя

Электронная почта

Сайт