0

这个有效：

<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>

我怎样才能解决这个问题？我需要一个类来多次使用它。

4

6 回答 6

10

没有getElementByClassName功能，只有getElementsByClassName一个，因为给定类可以有多个元素。

你可以更换

 document.getElementByClassName('textbox')

和

 document.getElementsByClassName('textbox')[0]

在编辑您的问题后进行编辑：

此功能在 IE8 上不可用。如果你想在这个浏览器上使用它，你必须添加一个 shim，比如这个问题中描述的那个。

于 2013-08-28T06:44:21.867 回答
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';
}
于 2013-08-28T06:44:36.617 回答
1

如果您可以使用 jQuery，则使用起来会更简单.html()：

$("#textbox").html("Hidden text") // id=textbox
$(".textbox").html("Hidden text") // class=textbox
于 2013-08-28T06:51:08.403 回答
0

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

document.getElementsByClassName('textbox')[0].innerHTML='Hidden text'
于 2013-08-28T06:44:55.740 回答
0

如果你使用 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;
    }
}
于 2013-08-28T06:48:27.820 回答
0

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    
}
于 2013-08-28T06:49:43.607 回答