how to use jquery variable in inline css

Question

i have an script that i want to generate i div where ever user clicks and that div stays there so now i have this jquery script

$(document).ready(function() {
    $('body').click(function(e) {
        var offset = $(this).offset();
        $('#x_axis').html(e.clientX - offset.left);
        var x = (e.clientX - offset.left);
        $('#y_axis').html(e.clientY - offset.top);
        var y = (e.clientY - offset.top);
        $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');
        $('#bloom').css('left', x);
        $('#bloom').css('top', y);
    });
});

now on this line i want to add my X and Y variables to left and top attribute :

            $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');

any idea how this can be done ?? or any better way to make this thing that when user click on each part of page a div generates there

Three (edit: four) answers, and none of them do it properly. $('body').append($('<div>').attr('id', "bloom").css({ position: "relative", left: x }).text("asd")); — user5734311
– user5734311, Commented Jan 26, 2019 at 7:38
Also note that you don't want to "use jquery variable in inline css", what you want to do is "insert a variable into a string", a problem which is much easier to solve via Google. You need to cut irrelevant stuff from your problem before plugging it into a search engine. — user5734311
– user5734311, Commented Jan 26, 2019 at 7:41

anees · Accepted Answer · 2019-01-26 07:27:33Z

3

You can use template literals for that

Solution

  $('body').append(`<div id="bloom" style="position: relative; left: ${x};">asd</div>`);

More about template literals

answered Jan 26, 2019 at 7:27

anees

1,8853 gold badges20 silver badges27 bronze badges

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

2 Comments

Farshad Over a year ago

should i add any thing to my project because thats not working it just out puts ${x} in html

anees Over a year ago

use `` instead of '' for the enclosure,

ellipsis · Accepted Answer · 2019-01-26 07:29:38Z

2

You can directly place by adjusting the ''

$('body').append('<div id="bloom" style="position: relative; left:'+x+';">asd</div>');

answered Jan 26, 2019 at 7:29

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Comments

Sahil Raj Thapa · Accepted Answer · 2019-01-26 07:33:37Z

1

you can concatenate the variable

eg:

 $('body').append('<div id="bloom" style="position: relative; left:' + x + ';">asd</div>');

or

use template literals

$('body').append(`<div id="bloom" style="position: relative; left:${x};">asd</div>`);

edited Jan 26, 2019 at 7:33

answered Jan 26, 2019 at 7:28

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

1 Comment

Farshad Over a year ago

should i add any thing to my project because thats not working it just out puts ${x} in html

Sandeep K. · Accepted Answer · 2019-01-26 07:38:54Z

1

You can concat the javascript variable in this format:

 $('body').append('<div id="bloom" style="position: relative; left:' + x + ';">asd</div>');

answered Jan 26, 2019 at 7:38

Sandeep K.

7616 silver badges19 bronze badges

Collectives™ on Stack Overflow

how to use jquery variable in inline css

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Related