22.01.2011, 18:52
|
Аспирант
|
|
Регистрация: 24.05.2010
Сообщений: 31
|
|
Обратится по классу
К сожалению не смог правильно задать вопрос гуглу, ищу телепатов
Суть в том что на сайте есть несколько участков, имеющих следующий вид:
Код:
|
<div class="pole">
<label>
<a class="none"></a>
</label>
</div> |
Мне необходимо чтобы при собитии OnMouseOver на блок div с соответствующим классом цвет ссылки менялся. Как обращаться к тегу по id я знаю, но как обратиться к тегу по классу?
|
|
22.01.2011, 19:12
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
Вот наводите на див, будет меняться цвет ссылки:
<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>
|
|
22.01.2011, 19:34
|
Аспирант
|
|
Регистрация: 24.05.2010
Сообщений: 31
|
|
Пример немного не работает в фф =)
З.Ы И почему именно [0] див? разве он тогда не возьмет только самый ранний?
|
|
22.01.2011, 19:40
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
[MI_nor], фф скорее всего не так цвета обрабатывает, на счёт [0] не помню, но пример без указания индекса не сработает.
|
|
22.01.2011, 19:48
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
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>
Последний раз редактировалось monolithed, 22.01.2011 в 20:03.
|
|
22.01.2011, 19:59
|
|
Профессор
|
|
Регистрация: 25.05.2010
Сообщений: 511
|
|
monolithed, точно, совсем забыл про особенности getElementsByClass, забыл про кроссбраузерную реализацию.
|
|
22.01.2011, 20:42
|
Аспирант
|
|
Регистрация: 24.05.2010
Сообщений: 31
|
|
monolithed, Но суть остается, ваш вариант тоже лишь для одного тега, но их несколько
|
|
22.01.2011, 21:10
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Сообщение от [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>
Последний раз редактировалось monolithed, 22.01.2011 в 21:24.
|
|
22.01.2011, 21:34
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,589
|
|
<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 идёт лесом, но ослики как-нить переживут.)
Последний раз редактировалось Aetae, 22.01.2011 в 21:37.
|
|
22.01.2011, 21:57
|
Особый гость
|
|
Регистрация: 02.04.2010
Сообщений: 4,260
|
|
Сообщение от Aetae
|
Толко ие 6 идёт лесом
|
на последнем из проектов решил больше не поддерживать IE6, как в прочем и сами мелкомягкие (они уже года 2-3 как, я до последнего тянул)
хотя на сколько я понят, ТС'y не совсем hover нужен....
Последний раз редактировалось monolithed, 22.01.2011 в 22:00.
|
|
|
|