стиль при наведении курсора на переменную javascript - PullRequest
Новая
       1

стиль при наведении курсора на переменную javascript

0 голосов
/ 29 июня 2011

Я пытаюсь стилизовать состояние наведения на переменную, которую я создал.Я довольно новичок в javascript, так что, надеюсь, один из вас поможет мне.

вот сценарий: 

controlDiv.style.padding = '5px';

var controlUI = document.createElement('DIV');
controlUI.style.height = '19px';
controlUI.style.backgroundColor = '#F9F9F9';
controlUI.style.background = 'linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%)';
controlUI.style.boxShadow = '2px 2px 2px 1px #999';
controlUI.style.borderRadius = '2px';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.borderColor = '#9BADCF';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click Me';
controlDiv.appendChild(controlUI);

я хочу написать скрипт для установкиразличные свойства стиля для div, создаваемого переменной controlUI, когда указатель мыши находится над указанным div.

Ответы [ 2 ]

4 голосов
/ 29 июня 2011

Старайтесь не устанавливать встроенные стили

Установка встроенных стилей является очень плохой практикой, поскольку ее трудно поддерживать, пока приходится искать внутри кода, чтобы расшифровать, где установлены определенные стили. Я даже не пытаюсь устранить различия в браузерах, которые могут стать настоящей болью, если вы будете использовать чистый DOM + Javascript.

Лучший подход: используйте CSS-классы

Вместо установки отдельных индивидуальных стилей для вашего созданного элемента (и написания нескольких строк кода) гораздо проще и лучше просто применить класс CSS к вашему элементу: 

controlDiv.className = "some-class";

и затем определите все об этом классе в файле CSS, который определяет все стили. Это также сделает очень простым определение связанных стилей (например, hover, посещения, :: before и т. Д.)

4 голосов
/ 29 июня 2011

Поскольку вы работаете исключительно с JavaScript, а не с CSS, вам придется делать это сложным образом, а именно с событиями. С jQuery это будет: 

$(controlUI).hover(
    function onMouseEnter() {
        this.style.backgroundColor = "blue";
    },
    function onMouseLeave() {
        this.style.backgroundColor = "#F9F9F9";
    }
);

Без jQuery вам бы понадобилось использовать события DOM, что является проблемой, поскольку они не совместимы между браузерами с IE менее 9, как подробно обсуждалось в этой статье MDC . Код в конечном итоге выглядит примерно так: 

var crossBrowserAEL = controlUI.addEventListener ? "addEventListener" : "attachEvent";

controlUI[crossBrowserAEL]("mouseover", function () {
    controlUI.style.backgroundColor = "blue";
});
controlUI[crossBrowserAEL]("mouseout", function () {
    controlUI.style.backgroundColor = "#F9F9F9";
});
...