Как получить динамический доступ к элементам определенного тега Div? - PullRequest
Новая
       11

Как получить динамический доступ к элементам определенного тега Div?

1 голос
/ 11 декабря 2011

Это мой JavaScript-обработчик события onMouseOver для тегов Div. (Работает нормально, по крайней мере, в Chrome и IE): 

function changeCallout(sender, e) {
    document.getElementById(sender.id).className = "callout2";
}

То, что я хотел бы сделать, это установить свойство color тега H2, содержащегося в элементе Div, для которого изменился его класс.

Я знаю, что должен иметь возможность получить доступ либо к свойству цвета, либо к изменению класса, но я не могу понять, как получить доступ только к соответствующему тегу H2 (мне известно о getElementsByTagName) Какой синтаксис для этого?

ТИА.

Ответы [ 3 ]

2 голосов
/ 11 декабря 2011

Предполагая, что требуемый h2 является первым под целевым значением div, затем используйте следующее для поиска относительно этого div: 

var div = document.getElementById(sender.id);
var h2 = div.getElementsByTagName("h2")[0];

Если это не первый, просто измените 0 на n (во второй строке), где n - позиция желаемого заголовка.

2 голосов
/ 11 декабря 2011

Да, getElementsByTagName сделает свое дело, но помните, что он также получает вложенные элементы.Например, если у вас есть div внутри div с элементами h2, они также будут выгружены в массив.

Я знаю, что это не ваш вопрос, но вам не нужно получать отправителяидентификатор элемента, чтобы использовать его в коде;просто используйте ключевое слово this в качестве аргумента, и элемент будет передан функции.Он работает как со встроенными элементами html, так и с вызовами eventListener, и вам не нужно использовать getElementById. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            div {width:100px;height:100px;background-color:#F00;}
            </style>
    </head>
    <body>

        <div onclick="onClick(this)">I'm a div</div>

        <script>
            function onClick(div) {
                alert(div.innerHTML);
            }
            </script>
    </body>
</html>
2 голосов
/ 11 декабря 2011

document.getElementById(sender.id).getElementsByTagName('h2') вернет NodeList всех элементов H2 внутри элемента с заданным идентификатором.

...