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

Question

I'm starting a coding class and one of my assignments is to get a box to grow, change to blue, shrink, and reset. 我正在开始编码课程，我的任务之一是让盒子长大，变成蓝色，缩小和重置。 I have the first three but I'm not sure how to go about getting the reset button done. 我有前三个，但是我不确定如何完成重置按钮。

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

To easily reset the inline styles, you can use $("#box").removeAttr("style"); 要轻松重置内联样式，可以使用$("#box").removeAttr("style"); , however this will remove all inline CSS on the element. ，但这将删除该元素上的所有内联CSS。 The solution to this would be to put your initial styles in a <style> tag, so your code would be: 解决方案是将您的初始样式放在<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 个解决方案

解决方案1
0 已采纳 2019-01-07 11:27:04

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-07 11:27:04

解决方案1
0 已采纳 2019-01-07 11:27:04