设置javascript变量悬停状态的样式

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

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

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

如果没有jQuery，您将需要使用DOM事件，这是一个难题，因为它们与小于9的IE不兼容。代码最终看起来像：

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

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

尽量避免设置内联样式 设置内联样式是非常糟糕的做法，因为当您必须查看代码内部以破译某些样式的设置位置时，很难进行维护。我甚至没有试图触及浏览器之间的差异，如果您使用纯DOM+Javascript，这些差异可能会成为真正的痛苦

更好的方法：使用CSS类 与其在创建的元素上设置特定的单独样式并编写几行代码，不如将CSS类应用于元素：

controlDiv.className = "some-class";

然后在定义所有样式的CSS文件中定义这个类的所有内容。这也使得定义相关样式变得非常简单，如hover、visted、：：before等