Problems with using javascript variable in css field

Question

I have one question about using variable (time2 in my case) in data-title CSS field. This is example what i need : http://jsfiddle.net/9oydvza0/1/ What shall i do that this variable takes value id time2?

Code from link : 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>

i'm need when i take the mouse in the picture they show me text variable time2 (ololo in my case) — user3693234
– user3693234, Commented Aug 19, 2014 at 6:18
you have to set the attrib, you can't point to another element for the content. — dandavis
– dandavis, Commented Aug 19, 2014 at 7:11

Roshan · Accepted Answer · 2014-08-19 07:10:33Z

2

In your CSS when you are hovering on class photo4 you are showing its data-title-id contents, which you have set to time2 in your html,So definately it will show time2, So either set it to <div class="photo4" data-title-id="ololo"> OR if you want to set it dynamically with the content of id time2 then do this

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

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

SEE DEMO HERE

answered Aug 19, 2014 at 7:10

Roshan

2,1942 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-08-19 06:20:30Z

0

Use like this:

document.querySelectorAll('[data-title-id]').innerHTML = "ololo";

answered Aug 19, 2014 at 6:20

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

user3693234 Over a year ago

I'm sorry but i'm not understand how i can use this, can you show me in example? jsfiddle.net/9oydvza0/1

Suresh Ponnukalai · Accepted Answer · 2014-08-19 06:25:51Z

0

If you are OK with jquery you can use like below.

 $(document).ready(function(){  
    $(".photo4").attr("data-title-id","ololo");
 });

DEMO

answered Aug 19, 2014 at 6:25

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

Collectives™ on Stack Overflow

Problems with using javascript variable in css field

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related