使用JavaScript/JQuery应用css值

Apply css value using JavaScript/JQuery

本文关键字：css 应用 JQuery JavaScript 使用      更新时间：2023-09-26

我试图使用JavaScript/JQuery编辑css值。我创建了一个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>

此"amount%"将是具有"amount%"值的字符串。但你想把amount + "%"改成200% 

$(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>

相关文章：