为工具提示更改动态生成的html元素的title属性

Change title attribute of dynamically generated html element for tooltip

本文关键字：html 元素 title 属性 工具提示 动态      更新时间：2023-09-26

我有一个动态生成的HTML元素，其中包含一个title属性，该属性在悬停时出现在工具提示中，如:

<div title="tooltip text" class="classname" id="identifier"></div>

我想改变标题属性的内容使用javascript代码集运行作为HTML渲染的一部分。目前，我的代码如下:

var changeTooltip = function(){
     var TooltipElement = document.getElementsByClassName("classname");
     if (TooltipElement.title = "tooltip text"){
         TooltipElement.title = "new message";
     };
};
window.onload = changeTooltip();

在页面完全呈现后，此代码将原始字符串保留在div的title属性中。谁能解释一下原因，并指出正确的方法?注意，我必须使用JS，我不能使用JQuery。

getElementsByClassName()(注意复数Elements)返回元素的列表。循环通过:

var changeTooltip = function(){
  var TooltipElements = document.getElementsByClassName("classname");
  
  for ( var i = 0; i < TooltipElements.length; ++i )
  {
    var TooltipElement = TooltipElements[i];
      
    if (TooltipElement.title == "tooltip text")
      TooltipElement.title = "new message";
  };
};
changeTooltip();
.classname:after {
  content: attr(title);
  font-style: italic;
}
<div title="tooltip text" class="classname" id="identifier">Title: </div>
<div title="other text" class="classname" id="identifier2">Title: </div>

最后，您需要更改:

window.onload = changeTooltip();


window.onload = changeTooltip;

原因是，正如函数名所暗示的，getElementsByClassName返回元素S的列表，而不是单个元素。如果您知道要修改的特定元素(div元素)是第一个/唯一符合条件的元素，则可以使用[0]访问它。试一试:

var TooltipElement = document.getElementsByClassName("classname")[0];

此外，因为你的div有一个ID，你实际上最好使用:

var TooltipElement = document.getElementById("identifier");

当您针对单个特定元素时，总是更喜欢使用ID。它更简洁、准确，性能也更好。

参见工作示例:

var TooltipElement = document.getElementById("identifier");
TooltipElement.title = "new title";
<div title="tooltip text" class="classname" id="identifier">Some text</div>

相关文章：