javascript - 创建动态并添加 onMouseOver 属性

Question

我在我的页面中使用 Javascript 在 DOM 中创建元素，如下所示

var myTd_1 = document.createElement("td")

并为它们添加属性，例如

myTd_1.width='25%'
myTd_1.padding = '6'

我真的想为 TD 添加不同的背景颜色，以防使用 onMouseOver 和 onMouseOut 事件。

我该怎么做 ？

我尝试在网上寻找它，但无法真正找到我需要的东西。

我使用我所知道的最接近的是：

myTd_1.onMouseOver = 'this.style.backgroundColor="#042b2b"'
myTd_1.onMouseOut = 'this.style.backgroundColor="transparent"'

但它不起作用:(

Answer 1

您所要做的就是将事件侦听器添加到mouseover和mouseout事件的元素。您可以使用以下方法执行此操作addEventListener：

var myTd_1 = document.createElement("td");

myTd_1.width='25%';
myTd_1.padding = '6';

document.getElementById('targetrow').appendChild(myTd_1);

myTd_1.addEventListener("mouseover",function(){
    this.style.backgroundColor="#042b2b";
});
myTd_1.addEventListener("mouseout",function(){
    this.style.backgroundColor="transparent";
});

Answer 2

您可以在不以更动态的方式使用 id 的情况下执行此操作。

这是一个活生生的例子

这是我使用的代码：

/* get the table td elements */
var tdCollection = document.getElementById('main').getElementsByTagName('td'),
    i = 0,
    bgClassName = 'mouseover';

function removeClass(element, className) {
    element.className = element.className.replace(new RegExp('(\\s|^)' +  className + '(\\s|$)', 'g'), '');
}

while (tdCollection[i]) {
    tdCollection[i].addEventListener('mouseover', function () {
        /* adding the class to change bgcolor */
        this.className += ' mouseover'; 
    });
    tdCollection[i++].addEventListener('mouseout', function () {
        /* removing the bgcolor changing class */
        removeClass(this, bgClassName);  
    });
};
​

Answer 3

尝试这个：

   myTd_1.onmouseover = function() {
      myTd1.style.backgroundColor = "#042b2b";
   }

   myTd_1.onmouseout = function() {
      myTd1.style.backgroundColor = "transparent";
   }

Answer 4

尝试这个 ....

myTd_1.onmouseover = 'this.style.backgroundColor="#042b2b"';
myTd_1.onmouseout = 'this.style.backgroundColor="transparent"';