nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Динамическое создание элементов javascript. Изменить CSS на javascript. Как создать элемент с помощью scriptjava?

Прежде чем начать создавать элементы, перед тегом head подключим scriptjava фреймворк


<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>


Теперь можно приступить к созданию элементов, для этого пишем вот такой код:


<script type="text/javascript">
//создаю элемент
var new_div = $$i({
create:'div',
attribute: {
'style':'color:#00ffff; width:300px; height:50px; background:#0000ff;'
},
insert:$$().body
});
//прописываем стили для осла 6 версии IE6
$$(new_div).$$('color','#00ffff').$$('width','300px').$$('height','50px').$$('background','#0000ff');
//вставляю текст
$$(new_div).$$('Всем привет!');
</script>


Как видите все довольно просто
Мы создали новый div и вставили в него текст Всем привет!

С помощью строки


$$(new_div).$$('color','#00ffff').$$('width','300px').$$('height','50px').$$('background','#0000ff');


мы повторно добавили стили CSS которые уже были созданы при создании элемента и прописаны в свойстве attribute
Есле вы все еще не можете расстаться с ослом 6 версии (IE6) и ниже, то прийдется вот именно так решать проблему добавления стилей.
Впрочем эта строка не обязательна.

В свойстве insert мы указали куда будет вставлен новый элемент - в тело документа

удалить созданный элемент также просто как и создать


$$().body.removeChild(new_div);


Работать с CSS в scriptjava очень просто
Допустим у нас на странице есть элемент


<div id="code"></div>


и мы решили поменять стили у этого элемента, вставить текст

нет ничего проще


$$('code','текст').$$('color','#00ffff').$$('background','#0000ff');


можно написать и так


$$('code').$$('color','#00ffff').$$('background','#0000ff').$$('текст');


или даже так


$$('code','color','#00ffff').$$('текст').$$('background','#0000ff');


Эти коды делают одно и тоже, результат будет одинаковым

Теперь допустим на странице несколько элементов, и для них так же нужно поменять стили и вставить текст...


<div id="code1"></div>
<div id="code2"></div>


добавим стили к этим элементам и вставим текст


$$('code1','текст1').$$('color','#00ffff').$$('background','#0000ff');
$$('code2','текст2').$$('color','#00ffff').$$('background','#0000ff');


но все это дело можно переписать и в одну строку, результат будет таким же


$$('code1','текст1').$$('color','#00ffff').$$('background','#0000ff').$$().$$('code2','текст2').$$('color','#00ffff').$$('background','#0000ff');


Элементов может быть больше, ограничений нет

вот например такой код


$$().body


не что иное как


document.body


Но не нужно думать что на этом возможности библиотеки работы с DOM заканчиваются, на против это только начало длинной истории...
Вас зовут:

Ваш комментарий:


Код на картинке: