Как программно присвоить элементу стиль?
Делаю так:
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; Но так не работает. Как это сделать? |
А нельзя сделать стили по классам и элементу присваивать класс?
|
Как это сделать?
Чем класс .selectedItem отличается от айдишника #selectedItem? |
Тем, что элементу можно присвоить className, и стили сами применятся.
|
Как это программно реализовать?
|
elem.className = 'selectedItem'; (равнозначно <... class="selectedItem">)
elem.id = 'selectedItem'; (равнозначно <... id="selectedItem">) |
Спасибо!
|
Не работает :-(
<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;
}
|
vlad275,
кавычки забыли. И используйте className лучше для стилей. |
Хорошо
|
Не сработало
<style>
.selectedItem {color:#FF0000;}
</style>
ни так: document.getElementById(id).className="selectedItem"; ни так: document.getElementById(id).className=".selectedItem"; |
Первый вариант должен быть рабочим. Ищите ошибку в другом месте.
|
Первый вариант правильный. Возможно в CSS для этого элемента уже есть более приоритетные стили.
|
Да, они уже находятся в
<body class="soria"> <div id="leftMenu"> Как быть? |
Выучить CSS =)
Ну так навскидку, если блок внутри #leftMenu, в CSS-файле должно быт что-то подобное:
#leftMenu .selectedItem {
…
}
|
Спасибо. Спрошу у верстальщика.
|
Подскажите пожалуйста.
Есть функция:
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, в любом случае, даже если переменные равны. Подозреваю, что неправильное условие у меня. |
Вы сравниваете ссылки на элементы, а не value элементов.
|
ого, вот это я поплыл мозгом.
спасибо огромное :) |
<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>
|
monolithed, а я уж сделал
спасибо конечно за оперативность. кстати, может кто подскажет еще кое-что. этой функцией я проверяю правильность ввода повтора пароля на странице регистрации и если в полях данные совпадают, то рамка подсвечивается зеленым, иначе красным. использовал .input-no { border:2px solid #FF0000;} но ширина 2 пикселя много, а один пиксель как-то маловато. Может есть альтернативный вариант? |
Более заметно:
.input-no{
background:red;
color:#fff
}
|
<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
}
|
| Часовой пояс GMT +3, время: 20:14. |