• Paranoid - курс по анонимности и безопасности в сети от команды codeby. Защита персональных данных, анонимность в сети интернет, настройка виртуальных машин, безопасная передача данных, анти форензика и еще много всего полезного. Подробнее ...

Getelementbyid

  • Автор темы AbrakadabrA
  • Дата начала
A

AbrakadabrA

#1
Есть таблица с тремя строками и тремя столбцами.
Хочу сделать так чтобы при наведении мыши на любую из трех ячеек в столбце менялся bacrgroundColor всего столбца.
код страницы.
Код:
<script>
function action()
{
var element = document.getElementById(this);
element.style.backgroundColor = 'red';
}
</script>
<table width = "900" border = "1" align = "center" bordercolor = "black">
<tr align = "center">
<td id = "item1" onmouseover = "action()">Покупки</td>
<td id = "item2" onmouseover = "action()">Мои средства</td>
<td id = "item3" onmouseover = "action()">Отчет</td>
</tr>
<tr align = "center">
<td id = "item1" onmouseover = "action()"><img src = "../images/shopcart.png" /></td>
<td id = "item2" onmouseover = "action()"><img src = "../images/money.png" /></td>
<td id = "item3" onmouseover = "action()"><img src = "../images/paper.png" /></td>
</tr>
<tr align = "center" height = "20">
<td id = "item1" onmouseover = "action()"></td>
<td id = "item2" onmouseover = "action()"></td>
<td id = "item3" onmouseover = "action()"></td>
</tr>
</table>
Почему то строка "var element = document.getElementById(this);" возвращает null. Из-за этого все это чудо не работает.
Помогите разобраться...
 
A

alenkins

#2
Ну ты силён))) Один id на одной странице может встречаться только один раз.
 
A

AbrakadabrA

#3
ТОЧНО! Блин иногда тупости моей нет предела.
Спасибо огромное, ткнули на тупейшую ошибку. )))
 
A

AbrakadabrA

#4
А как мне тогда поменять бэкграунд нескольких обьектов сразу?
 
A

AbrakadabrA

#6
Не фурычит. Может я что то делаю не так опять?
использую getElementsByClassName.
alert возвращает [object NodeList]
 

1ive

Well-known member
12.09.2010
621
1
#7
Нахрена извращаться?

HTML:
<script>
function action(id){
var MyDiv = document.getElementById('custJSstyle');
MyDiv.innerHTML = MyDiv.innerHTML+'#'+id+'{background:#ff0000;}';
}
</script>

<style id="custJSstyle"></style>

<table width = "900" border = "1" align = "center" bordercolor = "black">
<tr align = "center">
<td id = "item1" onmouseover = "action('item1');">Покупки</td>
<td id = "item2" onmouseover = "action('item2');">Мои средства</td>
<td id = "item3" onmouseover = "action('item3');">Отчет</td>
</tr>
<tr align = "center">
<td id = "item1" onmouseover = "action('item1');"><img src = "../images/shopcart.png" /></td>
<td id = "item2" onmouseover = "action('item2');"><img src = "../images/money.png" /></td>
<td id = "item3" onmouseover = "action('item3');"><img src = "../images/paper.png" /></td>
</tr>
<tr align = "center" height = "20">
<td id = "item1" onmouseover = "action('item1');"></td>
<td id = "item2" onmouseover = "action('item2');"></td>
<td id = "item3" onmouseover = "action('item3');"></td>
</tr>
</table>
 

1ive

Well-known member
12.09.2010
621
1
#8
Так как функции getElementsByClassName(); на самом деле не существует , она естественно не заработает.
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Но если есть желание использовать именно её, существует костыль:</div></div><div class="sp-body"><div class="sp-content">
JavaScript:
if(document.getElementsByClassName) {

getElementsByClass = function(classList, node) {	
return (node || document).getElementsByClassName(classList)
}

} else {

getElementsByClass = function(classList, node) {			
var node = node || document,
list = node.getElementsByTagName('*'), 
length = list.length, 
classArray = classList.split(/\s+/), 
classes = classArray.length, 
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}
}
}

return result
}
}