javascript - 如何在不使用 jQuery 的情况下在工具提示中显示 div 标记的文本内容？

Question

我希望能够在工具提示中显示 HTML 元素的上下文。我不确定我做错了什么。理想情况下，我希望看到 test 出现在我的工具提示中。但这并没有发生。

我们的代码库中不使用 jQuery，所以我不能使用任何 jQuery 插件。但我们会在需要时编写 JavaScript 代码。我的设置如下所示

我的div如下:

<div class="tooltip message">test</div>

我的 CSS 设置:

.tooltip {
    display: inline;
    position: relative;
}
.tooltip.message:before {
    background: #333;
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    box-sizing: border-box;
}
.tooltip.message:after {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
}

我的 fiddle 在这里: http://jsfiddle.net/7LNJc/3/

Answer 1

给你的 class='tooltip message' 一个 id，比如:

<div class='tooltip message' id='test'>test</div>

查看以下内容:

var doc = document;
function E(e){
  return doc.getElementById(e);
}

现在 E('test') 与 document.getElementById('id') 相同，因此您再也不需要它了；

var test = E('test').innerHTML; // holds the html

如果元素有一个 value 属性，就像输入一样，那么你会这样做:

var test = E('test').value; // holds the html value attribute

要分配新的 innerHTML 或 value，就像:

var test = E('test');
test.innerHTML = 'some text';

或

test.value = 'some value';

你甚至可以这样做:

E('test').innerHTML = 'some text';