Question

我正在尝试使用css修改JavaScript/JQuery个值。我创建了variable，我想像这样分配它：

var amount = 200;
$("p").css({"background-color": "yellow", "font-size": "amount%"}); // 200%

它只应用颜色，而不是字体大小。我做错了什么，我该如何解决？

这是一个JSFiddle，这是代码：

$(document).ready(function(){
    $("button").click(function(){
        
        var amount = 200;
        $("p").css({"background-color": "yellow", "font-size": "amount%"});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>

Answer 1

此"amount%"将为＆＃34;金额％＆＃34;值。但你想要的是amount + "%"改为200%

＆＃13;

$(document).ready(function(){
    $("button").click(function(){
        
        var amount = 200;
        $("p").css({"background-color": "yellow", "font-size": amount+"%"});
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>

＆＃13;

使用JavaScript / JQuery应用css值

1 个答案: