如何让 CSS 类在我的 Javascript 文件中工作

How do I get a CSS class to work in my Javascript file?

本文关键字：Javascript 文件 工作 我的 CSS      更新时间：2023-09-26

我想让这个类与var newCaption一起显示。在Javascript下面，我链接了CSS类。

window.onload = function() {
var caption = document.getElementsByTagName("caption");
var oldCaption = caption[0].innerHTML;
var newCaption = oldCaption + "CAPTION";
caption[0].removeChild(caption[0].firstChild);
caption[0].appendChild(document.createTextNode(newCaption));

这是我的 CSS 类：

.hoverNode{
   background-color:#FFFFCC;
   border: solid 1px black;
   width:100px;
   height:100px;
   position:relative;
   float:top;
   font-size:10pt;
   margin:5px;
   padding:3px;
   color:black;
}

将类添加到caption元素。

caption.classList.add('hoverNode');

在 Firefox 中，getElementByTagName（） 似乎忽略了标题。也许是因为它只允许将表作为父级。 它显示一个错误，说明标题 [0] 未定义。

尝试将标题更改为p，它似乎有效。

window.onload = function() {
var caption = document.getElementsByTagName("p");
var oldCaption = caption[0].innerHTML;
var newCaption = oldCaption + "CAPTION";
caption[0].removeChild(caption[0].firstChild);
caption[0].appendChild(document.createTextNode(newCaption));
}

当然，您需要一个<p>元素来添加文本。

<caption>Some text</caption>
<p>Some Paragraph</p>
这

行得通！ 

var caption = document.getElementsByTagName("caption");
var oldCaption = caption[0].innerHTML;
var newCaption = "CAPTION";
var span = document.createElement('span');
var text = document.createTextNode(newCaption);
span.appendChild(text);
span.className = "hoverNode";
caption[0].appendChild(span);
相关文章：