如何使用CSS将JQuery输出格式化为页面顶部和样式

html5 • • 问答

问题 01：

我刚刚开始我的 Jquery/Javascript 之旅，并且在将输出从脚本移动到链接上方的页面顶部时遇到问题，因此切换不会影响它。如果我将脚本移到顶部，那么它会在加载 HTML 之前运行。

问题 02：

我还能得到一些关于如何将 CSS 应用于这些变量的提示吗？

例如：放入一个盒子并更改字体/颜色等

<html>

<head>
  <title>Films</title>
  <link rel="stylesheet" href="css/layout.css" type="text/css">
</head>

<body>
  <h1>Films</h1>
  <a href="#">Add a Film</a>
  <div>
    <form>
      <p><label>Film</label><br />
        <input type="text" name="film"></p>
      <p><label>Rating</label><br />
        <select name="rating">
          <option value="1">One Star</option>
          <option value="2">Two Stars</option>
          <option value="3">Three Stars</option>
        </select>
      </p>
      <p><label>Description</label><br />
        <textarea name="filmdescription"></textarea></p>
      <p><button>Submit</button></p>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#actionlink").click(function() {
        $("#jquerytarget").slideToggle(200);
      });
    });
  </script>
  <script type="text/javascript">
    $("#submit").click(function(e) {
      e.preventDefault();
      var film = $("#film").val();
      $("#jquerytarget").prepend("<p>" + film + "</p>")
      var rating = $("#rating").val();
      $("#jquerytarget").prepend("<p>" + rating + "</p>")
      var filmdescription = $("#filmdescription").val();
      $("#jquerytarget").prepend("<p>" + filmdescription + "</p>")
    });
  </script>
</body>

</html>

回答

问题01的答案

如果您想先加载 HTML，然后运行 ​​JavaScript 代码，则必须按如下方式包装您的代码。

document.addEventListener("DOMContentLoaded", function(event) { 
  // write your code here
});

您的代码应该包含在事件处理函数中。事件处理函数（或回调）必须在发出事件的元素上注册，在我们的例子中是document对象。

问题02的答案

您可以按如下方式为元素设置 CSS 属性。在下面的代码片段中，我将<p>在单击按钮时更改元素的背景颜色。

<p>Paragraph 01</p>
<p>Paragraph 02</p>
<p>Paragraph 03</p>

<button>Change background color of all Paragraphs</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $("button").click(function() {
      $("p").css("background-color", "yellow");
    });
  });
</script>

如果您想将特定的 CSS 属性分配给特定的类，您可以尝试以下操作。单击按钮可以更改“第 2 段”的背景颜色。我已经根据他们的“id”选择了元素。

<p>Paragraph 01</p>
<p>Paragraph 02</p>

<button>Add background color of Paragraph 1</button>
<button>Remove background color of Paragraph 1</button>
<button>toggle background color of Paragraph 2</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

  // to add a class (the background color)
  $(document).ready(function() {
    $("#addBackgroundChange").click(function() {
      $("#para-01").addClass("new-para-background");
    });
  });

  // to remove a class (the background color)
  $(document).ready(function() {
    $("#removeBackgroundChange").click(function() {
      $("#para-01").removeClass("new-para-background");
    });
  });

  // to toggle a class (the background color)
  $(document).ready(function() {
    $("#toggleBackgroundChange").click(function() {
      $("#para-02").toggleClass("new-para-background");
    });
  });
</script>

<style>
  .new-para-background {
    background-color: yellow;
  }
  
</style>

以上是如何使用CSS将JQuery输出格式化为页面顶部和样式的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容