<p>个标记用于向其添加类。我有一个页面具有不同的“标题”属性 我知道当你将鼠标悬停在元素上时，正确的行为是显示“title”属性，但我希望能够：
基本示例：
<p title="Correct answer">Hello world</p>
<p title="Wrong answer">Goodbye world</p>
有什么方法可以使用JS在我的页面上一次显示所有标题属性？ 注意：我需要保留html标题属性，不能改变它。
答案 0 :(得分：2)
更新了答案
当您将鼠标悬停在其中任何一个答案段落上时，下面的代码会导致答案类型指示符显示在每个答案段落旁边。它遵循以下步骤：
document.querySelectorAll("[titles]")检索所有答案段落。position: absolute定位，但该绝对位置将相对于相应原始答案段落的位置。'mouseover'事件设置一个处理程序，通过添加适当的＆＃34;显示我＆＃34;使每个指标可见。上课。'mouseout'事件设置另一个处理程序，通过删除相同的＆＃34;显示我＆＃34;来隐藏每个指示符。从它上课。我注意不要将这些指标称为工具提示，正如我在评论中所指出的那样。但是，请注意，这些指示符会在悬停开始后立即显示，但原始默认工具提示仅针对该特定答案也会出现，仅仅一两分钟后，会不必要地复制部分显示信息。如果您愿意，可以禁用此默认工具提示，但这需要额外的工作。
我在指标的样式中包含z-index: -1;，因为在缺席时可能会出现问题。您可以通过鼠标悬停在答案上来显示指标。但是，如果，当该指示符出现时，它覆盖了光标所在的答案，那么鼠标在技术上不再超过答案，您立即触发'mouseout'事件。或者，如果您最初鼠标悬停在答案段落上的位置，但距离指标出现的位置稍远，则指标仍将按预期显示。但是，您只需将鼠标移动几毫米鼠标悬停在指示器上，有效地将鼠标移出答案，再次导致指示器过早消失。 z-index: -1;阻止了这一点，因为它将确保答案段落也在＃34;顶部＆＃34;。但是，这样做的一个缺点是指标文本可能被答案文本部分隐藏，具体取决于您将指标相对于答案文本的位置。
// the positioning of each indicator relative its corresponding answer text
var indicOffsetTop = 10;
var indicOffsetLeft = 5;
// retrieve all the answer paragraphs from the DOM
var answers = document.querySelectorAll("[title]");
// build but don't yet show the answer-type indicators
// loop over each answer paragraph
[].forEach.call(answers, function(answer) {
// create a new div element that will contain the answer-type text
var indic = document.createElement("div");
// style this div so it stands out and also so that it starts out hidden
indic.classList.add("answerTypeIndicator");
// get the position of the original answer paragraph so that
// the new answer-type indicator can be positioned near it
var posn = answer.getBoundingClientRect();
// slightly offset the position of the answer-type indicator relative to
// its corresponding answer text so that both can be seen simultaneously
indic.style.top = posn.top + indicOffsetTop + "px";
indic.style.left = posn.left + indicOffsetLeft + "px";
// take the value (i.e. the text) from the title attribute of the answer paragraph
// and put it into the content of the answer-type indicator
indic.innerHTML = answer.getAttribute("title");
// place the new indicator into the DOM, but note that it is still hidden at this point
document.body.appendChild(indic);
});
// put all the newly created answer-type indicator divs into a variable for later access
var indics = document.querySelectorAll(".answerTypeIndicator");
// determine what code to call when starting and stopping hovering over an answer
// do this by adding hover listeners to each "answer" paragraph
[].forEach.call(answers, function(answer) {
answer.addEventListener("mouseover", showTitleInfo);
answer.addEventListener("mouseout", hideTitleInfo);
});
// do this when starting to hover over an answer
function showTitleInfo() {
// loop through each answer-style indicator div
[].forEach.call(indics, function(indic) {
// make each indicator visible
indic.classList.add("showing");
});
}
// do this when stopping hovering over an answer
function hideTitleInfo() {
// loop through each answer-style indicator div
[].forEach.call(indics, function(indic) {
// hide each indicator
indic.classList.remove("showing");
});
}.answerTypeIndicator {
position: absolute;
font-size: 10pt;
background-color: rgba(255, 128, 0, 0.3);
color: rgb(200, 0, 0);
padding: 0.2em 0.5em 0.1em;
border: solid rgb(200, 0, 0) 1px;
fill-opacity: 0.2;
display: none;
z-index: -1;
}
.showing {
display: block;
}<h3>Move the mouse over any answer to see all answer types.</h3>
<p>Which of these is a way to greet someone?</p>
<p title="Correct answer">Hello world</p>
<p title="Wrong answer">Goodbye world</p>
<p>What color is an apple?</p>
<p title="Correct answer">Red</p>
<p title="Wrong answer">Blue</p>
答案 1 :(得分：0)
简单的方法，看看这个。
<强> HTML：
<p class="display_all_title"></p>
<强> JS：
var all_title = "";
$("body").find('p[title]').each(function() {
all_title += $(this).attr('title') + " ";
});
$('p.display_all_title').html(all_title);
<强>的jsfiddle： https://jsfiddle.net/fhepoeb5/