jQuery的CSS操作

ma_no_lo

于 2024-08-16 17:20:49 发布

阅读量2.1k

点赞数 6

分类专栏： Python全栈开发文章标签： jquery css 前端 javascript html

本文链接：https://blog.youkuaiyun.com/ma_no_lo/article/details/141245823

版权

一，前言

样式操作： .css()方法。
大小操作： 设置或获取元素的Width和Height。
位置操作： 设置或获取元素相对于document，父级元素，滚动条的位置。

二，CSS操作

（1）样式操作

.css()：设置或获取元素的样式，支持对象作为参数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../static/js/jquery-3.7.1.min.js"></script>
<style>
  .container {
    background-color: aqua;
    height: 100px;

  }
</style>

<body>
  <div class="container">盒子</div>
  <p>我是文字</p>
  <button id="btn1">添加样式</button>
  <script>
    console.log($(".container").css("background-color"))
    $("#btn1").on("click", function () {
      $("p").css("font-size", "20px");
      $("p").css({
        color: "red",
        fontWeight: "bold"
      })
    })
  </script>
</body>

</html>