javascript - 更改工具提示动态生成的 html 元素的标题属性

Question

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

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

我想使用设置为作为 HTML 渲染的一部分运行的 JavaScript 代码来更改标题属性的内容。目前，我的代码如下:

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

window.onload = changeTooltip();

页面完全呈现后，此代码会将原始字符串保留在 div 的 title 属性中。谁能解释为什么，并可能显示正确的方法？注意，我必须使用JS，不能使用JQuery。

Answer 1

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;

以便该函数在所有内容加载完成之前不会运行。