javascript - 如何在具有 html 的变量中使用变量

Question

我想知道如何在包含 HTML 的 Javascript 变量中使用变量，例如在下面的代码中

function SetCFonts()
{
    var Color = $('#CColor').val();
    var Font = $('#CFont').val();
    var Size = $('#CSize').val();
    var Bold = $('#CBoldOp').val();
    var Text = $('#NMsg').val();
    var Gen = "<font style=font-weight:+Bold color:+Color font-size:+Size font-family:+Font>Your Text Here</font>";

    alert(Gen);
}

Answer 1

您需要将字符串连接在一起：

var Gen = "<font style=font-weight:" +Bold + " color:" +Color + " font-size:"+Size + " font-family:" +Font+ ">Your Text Here</font>";

Answer 2

您应该从中创建一个元素，并.css()在其上调用 jQuery 的方法：

function SetCFonts ()
{
    var Gen = $('<font />').css({
        'color'         : $('#CColor').val(),
        'font-family'   : $('#CFont').val(),
        'font-size'     : $('#CSize').val(),
        'font-weight'   : $('#CBoldOp').val()
    }).text( $('#NMsg').val() );

    console.log( Gen );
}

Answer 3

使用 + 运算符，如 John Koerner 回答。或者您也可以使用concat运算符。

var Gen = "<font style=font-weight:".concat(Bold).concat("color:").concat(Color).concat("font-size:").concat(Size).concat("font-family:").concat(Font).concat(">").concat(Text).concat("</font>");

更多详细信息： 在 Javascript 中连接字符串的多种方法

Answer 4

您缺少的是连接：您必须关闭并重新打开引号：

function SetCFonts()
{
    var Color = $('#CColor').val();
    var Font = $('#CFont').val();
    var Size = $('#CSize').val();
    var Bold = $('#CBoldOp').val();
    var Text = $('#NMsg').val();
    var Gen = "<font style=font-weight:" + Bold + "; color:" + Color + "; font-size: " + Size + "; font-family: "+ Font +" >Your Text Here</font>";

    alert(Gen);
}