Question

我正在我的页面中使用Javascript在DOM中创建元素

var myTd_1 = document.createElement("td")

并向他们添加属性，比如说

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

我真的想在使用onMouseOver的情况下为TD添加不同的背景颜色和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

试试这个：

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

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

Answer 3

试试这个......

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

Answer 4

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

这是一个实时example

以下是我使用的代码：

/* 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);  
    });
};

创建动态并添加onMouseOver属性

4 个答案: