Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Изменение стиля

Автор: Biff 26.2.2013, 12:32

Здравствуйте.
Как сделать, что бы при наведении мыши  (и удержании) на один класс объекта, менялся  мгновенно стиль другого класса объекта?
Желательно что бы скрипт смотрел на css и там находил нужный стиль класса.  В данный момент мне нужно что бы менялся цвет фона и появлялись границы объекта.
Под классом я подразумеваю class в css.

Скрипт что-то такое:

Код


onload=function(){
var obj;
obj=document.getElementById("myColor");
obj.onmouseover=function(){this.style.color='red'; };
obj.onmouseout=function(){this.style.color='blue';};
 };

Только функция должна применяться не для того же элемента на который наводиться мышь, а для другого + нужно подключить сss.

Автор: Aliance 26.2.2013, 13:09

Ну а в чем проблема?

Если используется jQuery, то все просто:

Код


// при наведении на элемент с id=elem1, элемент с id=elem2 будет приобретать класс .myHoverClass
$(function(){
    $('#elem1').hover(
        function() {
            $('#elem2').addClass('myHoverClass');
        },
        function() {
            $('#elem2').removeClass('myHoverClass');
        }
    );
})

Если говорить про нативный язык, то это делается через свойство className:

Код


document.getElementById("elem1").onmouseover = function() {
    document.getElementById("elem2").className = 'myHoverClass';
}
document.getElementById("elem1").onmouseout = function() {
    document.getElementById("elem2").className = '';
}

Есть еще https://developer.mozilla.org/en-US/docs/DOM/element.classList, но оно не везде поддерживается.

Автор: Biff 26.2.2013, 13:54

Спасибо, буду разбираться. jQuery пока не пользуюсь.
Вопрос, а надо подключать сss в js файл, что бы он видел класс или достаточно на стр. исполнения скрипта дать ссылку на js и css?

Попробовал Ваш код, что-то не работает

Код


document.getElementById("elem1").onmouseover = function() {
    document.getElementById("elem2").className = 'myHoverClass';
}
document.getElementById("elem1").onmouseout = function() {
    document.getElementById("elem2").className = '';
}

Добавлено через 14 минут и 50 секунд
Вот например, не работает.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
window.onload=startList;
document.getElementById("gs").onmouseover = function() {
    document.getElementById("vs").className = 'myHoverClass';
}
document.getElementById("gs").onmouseout = function() {
    document.getElementById("vs").className = '';
}
</script>
<style type="text/css">
   .myHoverClass { 
    font-size: 120%; /* Размер шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
    color: #336; /* Цвет текста */
   }
  </style>
</head>

<body>
<a class="gs" href="#">Ссылка1</a>
<a class="vs" href="#">Ссылка2</a>
</body>
</html>

Автор: Biff 26.2.2013, 14:17

А вот через jQuery - работает отлично.

Автор: Aliance 26.2.2013, 14:38

Ну начнем с того, что у вас нет в коде элементов с id gs и vs. Есть только элементы с такими классами. Ну а закончим тем, что у вас есть какая-то неопределённая функция startList, которая не нужна в данном контексте, зато методы по работе с DOM подключается так сказать inline в секции head, на момент инициализации который никакого DOM`а еще не существует.

Рабочий пример: http://jsfiddle.net/Aliance/8t3Gs/

Автор: Biff 26.2.2013, 14:51

Aliance,

Спасибо за пример.
И еще один вопрос, если у меня уже присвоен id, class к изменяемому элементу (со своими стилями),
то происходит перемешивание классов или id (прим. class="gs myHoverClass") соответственно совмещаются и стили сss, а мне это не к чему,
мне нужно что бы к элементу присвоился новый класс со своими стилями, что можно сделать? В данном примере использую jQuery.

Автор: Aliance 26.2.2013, 15:27

У jQuery есть методы addClass и removeClass - добавить и удалить класс соответственно.
У нативного JS есть только доступ к className, содержащий в себе строку внутри class="...", соответственно разделенные через пробел классы (если их несколько).

Отсюда имеем вывод, что если тебе нужно заменить все классы (не зная изначально какие) на какой-то один - то использовать лучше нативную вариацию. Но с другой стороны, если тебе нужно заменить не конкретный класс, а все - это проблема в архитекруте интерфейса, имхо. Так как обычно разные классы с собой не связаны и мешать не должны:

например у нас есть 3 класса:

Код


.bold { font-weight: bold }
.red { color: #f00; }
.blue { color: #00f; }

и элемент:

Код


<span class="bold red">my span</span>

При замене red на blue класс bold никак не должен мешать.

Автор: Biff 27.2.2013, 12:56

Aliance

Спасибо. Очень помогли smile