LINUX.ORG.RU
Форум — Development  

Javascript сменить стиль элемента


0

0

Подобие таблицы создано из <div>:
<div id="1" onClick="click();">Текст1</div>
<div id="1" onClick="click();">Текст1</div>
Нужно сделать чтобы менялся фон у выбранного элемента div.
Так меняет:
document.getElementById(num_id).style.backgroundColor = "#FF0000"
Не нашел, как присвоить класс, чтобы использовать внешний
файл с указанием стилей. Что-то такое:
document.getElementById(num_id).style.class = "div.on"

function click(num_id) {
var f = document.getElementById(num_id);
f.style.backgroundColor = "#FF0000";
};

★
← C: вызов execvp с перенаправлением вывода
resolv.conf →
Ответ на: комментарий от WinLin

<html>
<head>
<style type="text/css">
div {
border-color: #7A7AE2;
background-color: #FFFFFF;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1;
border-top-width: 0;
border-style: solid;
}
div.on {
background-color: #FFF0F0;
}
div.off {
background-color: #FFFFFF;
}
div.sel {
background-color: #FF0000;
}
</style>

<script type="text/javascript">
var sel=1;
function click(num_id) {
var f = document.getElementById(num_id);
f.style.className = "sel";
var f1=document.getElementById(sel)
f1.style.className = "off";
sel = num_id;
};
function over(num_id) {
if (num_id != sel) {
var f = document.getElementById(num_id);
f.style.className = "on";
}
};
function out(num_id) {
if (num_id != sel) {
var f = document.getElementById(num_id);
f.style.className = "off";
}
};
function selClick() {
alert("Выбранный id:"+sel);
}
</script>
</head>

<body>
<a href="" onClick="selClick();">Показать выбранный id</a><br/><br/>

<div id="1" onClick="click(1)" onMouseOver="over(1)" onMouseOut="out(1)">10</div>
<div id="2" onClick="click(2)" onMouseOver="over(2)" onMouseOut="out(2)">20</div>
<div id="3" onClick="click(3)" onMouseOver="over(3)" onMouseOut="out(3)">30</div>
<div id="4" onClick="click(4)" onMouseOver="over(4)" onMouseOut="out(4)">40</div>
<div id="5" onClick="click(5)" onMouseOver="over(5)" onMouseOut="out(5)">50</div>
<div id="6" onClick="click(6)" onMouseOver="over(6)" onMouseOut="out(6)">60</div>
<div id="7" onClick="click(7)" onMouseOver="over(7)" onMouseOut="out(7)">70</div>
<div id="8" onClick="click(8)" onMouseOver="over(8)" onMouseOut="out(8)">80</div>
<div id="9" onClick="click(9)" onMouseOver="over(9)" onMouseOut="out(9)">90</div>
</body>
</html>

WinLin ★
() автор топика
Ответ на: комментарий от Miguel

document.getElementById(num_id).className = "sel";
Спасибо за разъяснение!

Еще одна заковыка:
в каждой строке приходится писать onClick, onMouseOver, onMouseOut.
<div id="1" onClick="click(1)" onMouseOver="over(1)" onMouseOut="out(1)">10</div>

Можно задать один обработчик на все элементы div
c передачей идентификатора?

WinLin ★
() автор топика
Ответ на: комментарий от Miguel

Сами мы не местные, много пока не понимаю :)

В jquery.com вроде можно задавать обработчики прямо
на все элементы div?
Таблицы как таковой нет, есть набор строк - div.
Заключить все эти div в один общий элемент и повесить на него
обработчик? Можно пример...

WinLin ★
() автор топика
Ответ на: комментарий от WinLin

> Еще одна заковыка: в каждой строке приходится писать onClick, onMouseOver, onMouseOut.

Если тебе надо только подсветить по наведению мыши, то псевдоклассы CSS под названием :hover рулят ;)

anonymous
()
Ответ на: комментарий от WinLin 

<div onclick="(function(event){
                 if(event==null)
                   event=window.event;
                 var target=event.target;
                 if(target==null)
                   target=event.srcElement;
                 doSomething(target.id)
               })(event)">
<div id="1">...</div>
<div id="2">...</div>
...
</div>
Реально, конечно, стоит вынести функцию в <script>...</script>, а не делать анонимной.
Кстати, почему мне при каждом нажатии клавиши в поле ввода на ЛОРе firebug жалуется, что ctrl_enter is not defined?

Miguel ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← C: вызов execvp с перенаправлением вывода
Development
resolv.conf →