javascript - 在 css 字段中使用 javascript 变量的问题

Question

我有一个关于在数据标题 CSS 字段中使用变量(在我的例子中是 time2)的问题。这是我需要的示例:http://jsfiddle.net/9oydvza0/1/我应该怎么做才能让这个变量取值 id time2？

来自链接的代码:CSS:

<style>
.photo4 {
    display: inline-block;
    position: relative;
}
.photo4:hover:after {
    display: block;
    content: attr(data-title-id);
    position: absolute;
    left: 120%;
    bottom: -250%;
    z-index: 1;
    background: #003399;
    font-family: Segoe UI;
    font-weight: lighter;
    font-size: 13px;
    padding: 5px 10px;
    color: #fff;
    border: 1px solid #333;
    -moz-border-radius: 5px -webkit-border-radius: 5px;
    border-radius: 5px 5px 5px 5px;
}
</style>

Javascript:

<script>
     document.getElementById("time2").innerHTML = "ololo";
</script>

HTML:

<p id="time2"></p>
<div style="width:10px; float:left; padding-top:20px;">
    <div class="photo4" data-title-id="time2">
        <img src="http://placekitten.com/g/300/300" width="22" height="22px" />
    </div>
</div>
</div>

Answer 1

当您将鼠标悬停在 class photo4 上时，在您的 CSS 中你正在展示它的 data-title-id contents,您已将其设置为 time2在你的 html 中，它肯定会显示 time2 ,所以要么将它设置为 <div class="photo4" data-title-id="ololo">或者，如果您想使用 content of id time2 动态设置它然后这样做

var myDiv=document.getElementById("time2")
myDiv.innerHTML = "ololo";

document.querySelector('.photo4').setAttribute("data-title-id", myDiv.innerHTML);

SEE DEMO HERE