Getelementbyid

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем AbrakadabrA, 28 авг 2011.

  1. AbrakadabrA

    AbrakadabrA Гость

    Есть таблица с тремя строками и тремя столбцами.
    Хочу сделать так чтобы при наведении мыши на любую из трех ячеек в столбце менялся bacrgroundColor всего столбца.
    код страницы.
    Код (Text):
    <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 Гость

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

    AbrakadabrA Гость

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

    AbrakadabrA Гость

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

    alenkins Гость

    getElementsByClass?
     
  6. AbrakadabrA

    AbrakadabrA Гость

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

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    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
    Web Team

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

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