Вход

Просмотр полной версии : Как программно присвоить элементу стиль?

vlad275
30.10.2008, 15:10
Делаю так:

var st = document.styleSheets[0];
//получаем первую таблицу стилей?

var r = (st.rules)?st.rules[0]:st.cssRules["#selectedItem"];
//Если Internet Explorer то использовать первое правило st.rules[0]

//alert(r.style.color);
//Вывод цвета

document.getElementById(id).style.color = r.style.color;


Но хочется не по одному атрибуту приравнивать, а сразу весь стиль.
Типа document.getElementById(id).style = r.style;
Но так не работает. Как это сделать?
Snipe
30.10.2008, 15:21
А нельзя сделать стили по классам и элементу присваивать класс?
vlad275
30.10.2008, 15:25
Как это сделать?
Чем класс .selectedItem отличается от айдишника #selectedItem?
Kolyaj
30.10.2008, 15:26
Тем, что элементу можно присвоить className, и стили сами применятся.
vlad275
30.10.2008, 17:22
Как это программно реализовать?
ZoNT
30.10.2008, 17:31
elem.className = 'selectedItem'; (равнозначно <... class="selectedItem">)
elem.id = 'selectedItem'; (равнозначно <... id="selectedItem">)
vlad275
30.10.2008, 17:38
Спасибо!
vlad275
30.10.2008, 17:50
Не работает :-(

<style>
#selectedItem {color:#FF0000;}
</style>

function doit(id) {
var obj = document.getElementById(id);
document.getElementById(id).id=#selectedItem;
}


И так не работает:

function doit(id) {
var obj = document.getElementById(id);
document.getElementById(id).id=selectedItem;
}
Kolyaj
30.10.2008, 17:55
vlad275,
кавычки забыли. И используйте className лучше для стилей.
vlad275
30.10.2008, 18:11
Хорошо
vlad275
30.10.2008, 18:19
Не сработало

<style>
.selectedItem {color:#FF0000;}
</style>

ни так:

document.getElementById(id).className="selectedItem";

ни так:
document.getElementById(id).className=".selectedItem";
Kolyaj
30.10.2008, 18:22
Первый вариант должен быть рабочим. Ищите ошибку в другом месте.
Octane
30.10.2008, 18:24
Первый вариант правильный. Возможно в CSS для этого элемента уже есть более приоритетные стили.
vlad275
30.10.2008, 18:30
Да, они уже находятся в


<body class="soria">

<div id="leftMenu">

Как быть?
Octane
30.10.2008, 18:38
Выучить CSS =)

Ну так навскидку, если блок внутри #leftMenu, в CSS-файле должно быт что-то подобное:
#leftMenu .selectedItem {
…
}
vlad275
30.10.2008, 19:24
Спасибо. Спрошу у верстальщика.
demix
13.12.2010, 11:29
Подскажите пожалуйста.
Есть функция:

function reg_pass() {
var inp_login = document.getElementById('login');
var inp_pass1 = document.getElementById('password');
var inp_pass2 = document.getElementById('re-password');
var inp_mail = document.getElementById('mail');


if (inp_pass2 == inp_pass1) {
inp_pass2.className='input-yes'; }
else {
inp_pass2.className='input-no';
}


}

При выполнении функции срабатывает присвоение класса input-no, в любом случае, даже если переменные равны. Подозреваю, что неправильное условие у меня.
Kolyaj
13.12.2010, 11:34
Вы сравниваете ссылки на элементы, а не value элементов.
demix
13.12.2010, 11:39
ого, вот это я поплыл мозгом.
спасибо огромное :)
monolithed
13.12.2010, 11:43
<script type="text/javascript">
window.onload = function(){
var inp_pass1 = document.getElementById('password');
var inp_pass2 = document.getElementById('re-password');

if(inp_pass1 != null && inp_pass2 != null){
if(inp_pass2.innerHTML == inp_pass1.innerHTML) {
alert(inp_pass2.className='input-yes');
}
else {
alert(inp_pass2.className='input-no');
}
}
};
</script>

<div id="password">1</div>
<div id="re-password">2</div>
demix
13.12.2010, 12:06
monolithed, а я уж сделал
спасибо конечно за оперативность.
кстати, может кто подскажет еще кое-что.
этой функцией я проверяю правильность ввода повтора пароля на странице регистрации и если в полях данные совпадают, то рамка подсвечивается зеленым, иначе красным.
использовал
.input-no {
border:2px solid #FF0000;}

но ширина 2 пикселя много, а один пиксель как-то маловато. Может есть альтернативный вариант?
UnderShot
13.12.2010, 12:36
Более заметно:.input-no{
background:red;
color:#fff
}
bushstas
15.12.2010, 12:34
<style>
.style1 {color:#FF0000;}
.style2 {color:#000;}
.style3 {color:#FFF;}
</style>

<a href="blabla" class="style1" onmouseover="changeStyle(this,'style2')" onmouseout="changeStyleBack(this)">Ссылка</a>




function changeStyle(obj,c){
curClass=obj.className
obj.className=c
}
function changeStyleBack(obj){
obj.className=curClass
}