Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Обратится по классу (https://javascript.ru/forum/events/14603-obratitsya-po-klassu.html)

[MI_nor] 22.01.2011 18:52

Обратится по классу
 
К сожалению не смог правильно задать вопрос гуглу, ищу телепатов :)

Суть в том что на сайте есть несколько участков, имеющих следующий вид:
Код:

<div class="pole">
<label>
<a class="none"></a>
</label>
</div>

Мне необходимо чтобы при собитии OnMouseOver на блок div с соответствующим классом цвет ссылки менялся. Как обращаться к тегу по id я знаю, но как обратиться к тегу по классу?

Vulkan 22.01.2011 19:12

Вот наводите на див, будет меняться цвет ссылки:
<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByClassName('pole')[0];
    div.onmouseover = function () {
        var a = div.getElementsByClassName('none')[0];
        a.style.color = (a.style.color == '#000000' ? '#ff0000' : '#000000');
    }
}
</script>

<div class="pole" style="width: 100px; height: 100px; border: 1px black solid;">
<label>
<a class="none" style="color: #000000;">ссылка</a>
</label>
</div>

[MI_nor] 22.01.2011 19:34

Пример немного не работает в фф =)
З.Ы И почему именно [0] див? разве он тогда не возьмет только самый ранний?

Vulkan 22.01.2011 19:40

[MI_nor], фф скорее всего не так цвета обрабатывает, на счёт [0] не помню, но пример без указания индекса не сработает.

monolithed 22.01.2011 19:48

Vulkan, все проще, ваш вариант не кроссбраузерный:
<script type="text/javascript">
window.onload = function() {
    var getElementsByClassName = function(getClass){
        if(document.querySelectorAll) {
            return document.querySelectorAll("." + getClass);
        }
        else if(document.getElementsByClassName) {
            return document.getElementsByClassName(getClass);
        }
        else {
            var list = document.getElementsByTagName('*'), i = list.length,
            classArray = getClass.split(/\s+/), result = [];
            while(i--) {
                if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
                    result.push(list[i]);
                }
            }
            return result;
        }
    };
    
    var handler = ['mouseover','mouseout'], i = handler.length;
    
    while(i--) {
        getElementsByClassName('class')[0]['on'+handler[i]] = function () {
        this.style.color = this.style.color == '' ? '#ff0000' : '';
        }
    }
};
</script>
<a href="#" class="class">ссылка</a>

Vulkan 22.01.2011 19:59

monolithed, точно, совсем забыл про особенности getElementsByClass, забыл про кроссбраузерную реализацию.

[MI_nor] 22.01.2011 20:42

monolithed, Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько

monolithed 22.01.2011 21:10

Цитата:

Сообщение от [MI_nor
Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько

а по конкретней можно?

Если вы об этом, то все просто решается:
<script type="text/javascript">
window.onload = function() {
    var getElementsByClassName = function(getClass){

        if(document.querySelectorAll) {
            return document.querySelectorAll("." + getClass);
        }

        else if(document.getElementsByClassName) {
            return document.getElementsByClassName(getClass);
        }

        else {
            var list = document.getElementsByTagName('*'), i = list.length,
                 classArray = getClass.split(/\s+/), 
                 result = [];

            while(i--) {
                if(list[i].className.search('\\b' + classArray + '\\b') != -1) {
                    result.push(list[i]);
                }
            }

            return result;
        }
    };
    
    var clasess = getElementsByClassName('class'), 
          i = clasess.length;
    
    while(i--) {
        getElementsByClassName('class')[i].onmouseover = function () {
            this.style.color = this.style.color == '' ? '#ff0000' : '';
        }
    }
};
</script>
<a href="#" class="class">ссылка</a>
<a href="#" class="class">ссылка</a>

Aetae 22.01.2011 21:34

<style type="text/css">
.pole {background:#ddf;height:100px}
.pole:hover a {color:#f00}
</style>
<div class="pole">
<label>
<a class="none">Ссилко</a>
</label>
</div>

И делов та.
Толко ие 6 идёт лесом, но ослики как-нить переживут.)

monolithed 22.01.2011 21:57

Цитата:

Сообщение от Aetae
Толко ие 6 идёт лесом

на последнем из проектов решил больше не поддерживать IE6, как в прочем и сами мелкомягкие (они уже года 2-3 как, я до последнего тянул)

хотя на сколько я понят, ТС'y не совсем hover нужен....


Часовой пояс GMT +3, время: 03:32.