带有getElementByClassName的innerHTML没有'不起作用

innerHTML with getElementByClassName doesn't work

本文关键字：不起作用 没有 getElementByClassName innerHTML 带有      更新时间：2023-09-26

这个有效：

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

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

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

你可以更换

 document.getElementByClassName('textbox')

带有

 document.getElementsByClassName('textbox')[0]

编辑问题后编辑：

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

它是getElementsByClassName。注意在Element之后的复数s。

由于它是一个数组，您需要指定索引号。

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

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

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

如果您可以使用jQuery，那么使用.html():会更简单

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

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

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

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    
}

如果使用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;
    }
}
相关文章：