Question

我正在开始编码课程，我的任务之一是让盒子长大，变成蓝色，缩小和重置。我有前三个，但是我不确定如何完成重置按钮。

$("#boxGrow").on("click", function() {
    $("#box").animate({height:"+=35px", width:"+=35px"}, "fast");
})

$("#boxShrink").on("click", function() {
    $("#box").animate({height:"-=35px", width:"-=35px"}, "fast");
})

$("#boxBlue").on("click", function() {
    $("#box").css("background-color", "blue");
})

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button class="btn" id="boxGrow">Grow</button>
    <button class="btn" id="boxBlue">Blue</button>
    <button class="btn" id="boxShrink">Fade</button>
    <button class="btn" id="boxReset">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

</body>
</html>

Answer 1

要轻松重置内联样式，可以使用$("#box").removeAttr("style");，但是这将删除元素上的所有内联CSS。解决方案是将您的初始样式放在<style>标记中，因此您的代码应为：

<!DOCTYPE html>
<html>
  <head>
    <title>Jiggle Into JavaScript</title>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"
    ></script>
    <style>
      #box {
        height: 150px;
        width: 150px;
        background-color: orange;
        margin: 25px;
      }
    </style>
  </head>
  <body>
    <p>Press the buttons to change the box!</p>

    <div id="box"></div>

    <button class="btn" id="boxGrow">Grow</button>
    <button class="btn" id="boxBlue">Blue</button>
    <button class="btn" id="boxShrink">Fade</button>
    <button class="btn" id="boxReset">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

  </body>
</html>

$("#boxGrow").on("click", function() {
  $("#box").animate({ height: "+=35px", width: "+=35px" }, "fast");
});

$("#boxShrink").on("click", function() {
  $("#box").animate({ height: "-=35px", width: "-=35px" }, "fast");
});

$("#boxBlue").on("click", function() {
  $("#box").css("background-color", "blue");
});

$("#boxReset").on("click", function() {
  $("#box").removeAttr("style");
});

如何使用JavaScript / JQuery使重置按钮正常工作？

1 个答案: