javascript - 用于设置 CSS 属性的变量属性

Question

我可以使用变量属性值来设置 CSS 属性吗？这是因为我有一个按钮输入，它是在来自后端（python）的 for 循环中定义的。例如，我该怎么做：

x = clicked_object.getAttribute('btnid');
$("button[attr1=x]").css('background-color', 'green');

显然，我可以写if条件但是编程太多，寻找更聪明的方法。

标签： javascriptcss

Answer 1

您可以通过构造一个选择器来实现这一点，该选择器捕获具有相应值的特定属性，如下所示：

var x = "green";
var y = "blue";
var z = "orange";

$('button[attr1="' + x + '"]').css('background-color', 'green');
$('button[attr2="' + y + '"]').css('background-color', 'blue');
$('button[attr3="' + z + '"]').css('background-color', 'orange');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button attr1="green">Button 1</button>
<button attr2="blue">Button 2</button>
<button attr3="orange">Button 3</button>