Question

我正在尝试设置我创建的变量的悬停状态。我对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设置不同的样式属性。

Answer 1

由于您纯粹使用JavaScript而不是使用CSS，因此您需要以艰难的方式完成此操作，即使用事件。使用jQuery，它将是：

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

如果没有jQuery，您将需要使用DOM事件，这是一个痛苦，因为它们与IE不小于9的跨浏览器兼容，如discussed extensively in this MDC article。代码最终看起来像：

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

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

Answer 2

尽量避免设置内联样式

设置内联样式是非常糟糕的做法，因为它很难维护，而你必须查看内部代码来破译设置某些样式的位置。如果您将使用纯DOM + Javascript，我甚至不会尝试触及可能会成为真正痛苦的浏览器差异。

更好的方法：使用CSS类

不是在创建的元素上设置特定的单独样式（并编写几行代码），而是将CSS类应用于元素更简单，更好：

controlDiv.className = "some-class";

然后在定义所有样式的CSS文件中定义有关此类的所有内容。这也使得定义相关样式（如悬停，访问，::之前等）非常简单。

样式悬停状态的javascript变量

2 个答案:

尽量避免设置内联样式

更好的方法：使用CSS类