Question

请检查下面的代码。我想在点击＆＃39;切换＆＃39;之后更改css属性。按钮。我在做什么错了？如果可能的话，请帮助我以任何其他方式做到这一点。谢谢大家

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>


<button id="myButton">switch</button>

<p class="foo">Some text</p>




<script type="text/javascript">

$("#myButton").click(function() {
  $(".foo").attr("background", "red");
});

</script>


<style>
.foo {
  background: gray;
}

</style>

</body>
</html>

Answer 1

您需要使用.css

的.attr方法实例

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

Answer 2

更改css属性时，请使用$.css()方法：

$("#myButton").click(function() {
  $(".foo").css("background", "red");
  // Or, for multiple properties:
  $(this).css({
    "background": "blue",
    "color": "white",
    "border": "2px solid yellow",
    "font-weight": "bold"
  });
});

.foo {
  background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="myButton">switch</button>
<p class="foo">Some text</p>

Answer 3

您必须使用 css() 方法：

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

有关详细信息，请参阅this w3schools链接。

以下是您的工作文件的工作示例。

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

.foo {
  background: gray;
}

<!DOCTYPE html>
<html>

<head>
  <title>test</title>

  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>

<body>


  <button id="myButton">switch</button>

  <p class="foo">Some text</p>

</body>

</html>

Answer 4

请在jquery中将attr更改为css。

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

.foo {
  background: gray;
}

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<button id="myButton">switch</button>
<p class="foo">Some text</p>



</body>
</html>

Answer 5

Background不是tag属性，它是css属性。这意味着你应该试试这个：

$("#myButton").click(function() {
  $(".foo").css("background", "red");
});

使用jquery更改css属性

5 个答案: