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

Question

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

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

我想使用 javascript 代码更改 title 属性的内容，并将其设置为运行作为 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.

Answer 1

getElementsByClassName()（注意 Elements 的复数形式）returns 元素的 list。循环遍历：

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;

以便函数运行直到所有内容都加载完毕。

Answer 2

原因是正如函数名所暗示的那样，getElementsByClassNamereturns一个元素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>

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

Change title attribute of dynamically generated html element for tooltip

javascript

html

tooltip