Question

这个有效：

<td onmouseover="document.getElementById('textbox').innerHTML='Hidden text'" onmouseout="document.getElementById('textbox').innerHTML='Show text'">
    <div id="textbox">Show text</div>
</td>

但是这个没有：

<td onmouseover="document.getElementByClassName('textbox').innerHTML='Hidden text'" onmouseout="document.getElementByClassName('textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

我该如何解决这个问题？我需要一个班级不止一次使用它。

Answer 1

没有getElementByClassName函数，只有getElementsByClassName函数，因为给定的类可以有多个元素。

你可以替换

 document.getElementByClassName('textbox')

与

 document.getElementsByClassName('textbox')[0]

编辑问题后编辑：

此功能在IE8上不可用。如果要在此浏览器上使用它，则必须添加垫片，例如this question中描述的垫片。

Answer 2

这是getElementsByClassName。请注意s之后的复数Element。

因为它是一个数组，你需要指定索引号。

document.getElementsByClassName('class-name')[0].innerHTML = 'html text'

如果您需要为每个元素应用更改，请使用for循环。

for(i in document.getElementsByClassName('class-name')){
    document.getElementsByClassName('class-name')[i].innerHTML = 'html text';
}

Answer 3

如果你可以使用jQuery，那么使用.html()更简单：

$("#textbox").html("Hidden text") // id=textbox
$(".textbox").html("Hidden text") // class=textbox

Answer 4

那是因为getElementsByClassName正在返回一个元素数组。你可以尝试

document.getElementsByClassName('textbox')[0].innerHTML='Hidden text'

Answer 5

如果您使用document.querySelector：

，该怎么办？

<td onmouseover="document.querySelector('.textbox').innerHTML='Hidden text'" onmouseout="document.querySelector('.textbox').innerHTML='Show text'">
    <div class="textbox">Show text</div>
</td>

我想这是有效的。

你应该考虑其他一些事情。在你的HTML中添加这些东西并不是一个好主意。那是因为你每次都在执行某些事情。缓存document.querySelector或document.getElementsByClassName的结果会很好。想象一下，如果表中有1000行，会发生什么。这是一个jsfiddle，展示了如何提高代码http://jsfiddle.net/krasimir/Zbgng/2/

的性能

HTML

<table><tr>
<td class="table-column">
    column1
</td>
<td class="table-column">
    column2
</td>
<td class="table-column">
    column3
</td>
</tr></table>

<div class="textbox">Show text</div>
<div class="textbox">Show text</div>
<div class="textbox">Show text</div>

JS

var columns = document.querySelectorAll(".table-column");
var textboxes = document.querySelectorAll(".textbox");
for(var i=0; column=columns[i]; i++) {
    column.addEventListener("mouseover", function() {
        replaceText("Hidden text");
    });
    column.addEventListener("mouseout", function() {
        replaceText("Show text");
    });
}
var replaceText = function(str) {
    for(var i=0; field=textboxes[i]; i++) {
        field.innerHTML = str;
    }
}

Answer 6

document.getElementByClassName('whatever')返回文档中的html对象元素数组，

所以你需要

var ele = document.getElementsByClassName('textbox');

ele[0].innerHTML = "Whatever text" ;

如果要将内部html设置为此类的所有元素你可以用

for(var i=0;i<ele.length;i++)
{
  ele[i].innerHTML = "we all are of same class";
  // or you can dynamically insert different text too    
}

带有getElementByClassName的innerHTML不起作用

6 个答案: