如何在嵌入式CSS中使用jquery变量

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

Answer 1

You can use template literals for that

Solution

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

More about template literals

Answer 2

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>`);

Answer 3

您可以通过调整''直接放置

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

Answer 4

您可以采用以下格式连接javascript变量：

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