jquery设置body css

原创

mob649e8157aaee 2023-08-30 06:33:30 ©著作权

文章标签 jQuery CSS css 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8157aaee的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery设置body CSS

介绍

在Web开发中，我们经常需要通过操作CSS来改变页面的样式。而使用jQuery库可以方便地实现这一目标。本文将介绍如何使用jQuery来设置body元素的CSS属性。

jQuery的概述

[jQuery](

设置body CSS

在jQuery中，可以使用css()方法来设置元素的CSS属性。在本例中，我们将使用该方法来设置body元素的CSS属性。

首先，我们需要在HTML文档中引入jQuery库。可以通过以下方式来实现：

<script src="

接下来，我们可以使用如下代码来设置body元素的背景颜色：

$('body').css('background-color', 'red');

上述代码中，$('body')表示选取所有的body元素，.css('background-color', 'red')表示将背景颜色设置为红色。我们可以将颜色值替换为任何其他有效的CSS颜色值。

除了背景颜色，我们还可以设置其他的CSS属性，例如字体大小、边框样式等。以下是一些示例代码：

$('body').css('font-size', '16px');
$('body').css('border', '1px solid black');

示例代码

下面是一个完整的示例，展示如何使用jQuery设置body元素的CSS属性：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery设置body CSS示例</title>
  <script src="
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  Hello, jQuery!
  <p>这是一个示例页面。</p>

  <script>
    $(document).ready(function() {
      // 设置背景颜色
      $('body').css('background-color', 'red');
      
      // 设置字体大小
      $('body').css('font-size', '16px');

      // 设置边框样式
      $('body').css('border', '1px solid black');
    });
  </script>
</body>
</html>

请将上述代码保存为一个HTML文件，并在浏览器中打开该文件。您将看到body元素的背景颜色变为红色，字体大小变为16像素，并且有一个黑色的边框。