1. Наш канал codeby в telegram. Пишем об информационной безопасности, методах защиты информации, о программировании. Не пропускай новости с кодебай, будь в тренде ! Подробнее ...

    Скрыть объявление

Getelementbyid

Тема в разделе "Web - программирование", создана пользователем AbrakadabrA, 28 авг 2011.

  1. AbrakadabrA

    AbrakadabrA Гость

    Репутация:
    0
    Есть таблица с тремя строками и тремя столбцами.
    Хочу сделать так чтобы при наведении мыши на любую из трех ячеек в столбце менялся 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. Из-за этого все это чудо не работает.
    Помогите разобраться...
     
  2. alenkins

    alenkins Гость

    Репутация:
    0
    Ну ты силён))) Один id на одной странице может встречаться только один раз.
     
  3. AbrakadabrA

    AbrakadabrA Гость

    Репутация:
    0
    ТОЧНО! Блин иногда тупости моей нет предела.
    Спасибо огромное, ткнули на тупейшую ошибку. )))
     
  4. AbrakadabrA

    AbrakadabrA Гость

    Репутация:
    0
    А как мне тогда поменять бэкграунд нескольких обьектов сразу?
     
  5. alenkins

    alenkins Гость

    Репутация:
    0
    getElementsByClass?
     
  6. AbrakadabrA

    AbrakadabrA Гость

    Репутация:
    0
    Не фурычит. Может я что то делаю не так опять?
    использую getElementsByClassName.
    alert возвращает [object NodeList]
     
  7. 1ive

    1ive Well-Known Member

    Репутация:
    0
    Регистрация:
    12 сен 2010
    Сообщения:
    621
    Симпатии:
    0
    Нахрена извращаться?

    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>
     
  8. 1ive

    1ive Well-Known Member

    Репутация:
    0
    Регистрация:
    12 сен 2010
    Сообщения:
    621
    Симпатии:
    0
    Так как функции 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">
    Код:
    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
    }
    }
     

Поделиться этой страницей