Mr.J-- jQuery学习笔记(八)--CSS样式操作

最新推荐文章于 2022-01-08 22:04:39 发布

End_less__

最新推荐文章于 2022-01-08 22:04:39 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/91378316

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍jQuery中CSS属性及类名操作方法，包括逐个、链式与批量设置样式，以及如何获取样式值。同时，讲解了jQuery的位置和尺寸操作，如width(), offset()与position()方法的使用，通过实例演示元素尺寸与位置的获取与设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS属性操作

在jQuery中，关于元素的样式操作方法共有2种：

（1）CSS属性操作；

（2）CSS类名操作；

三种设置方法
逐个设置

            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

链式设置

注意点: 链式操作如果大于3步, 建议分开

 $("div").css("width", "100px").css("height", "100px").css("background", "blue");

批量设置

$("div").css({
 width: "100px",
height: "100px",
background: "red"
 });

获取CSS样式值

console.log($("div").css("background"));

jQuery位置和尺寸操作方法

页面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-jQuery位置和尺寸操作的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
</body>
</html>

 var btns = document.getElementsByTagName("button");

监听获取

width()

获取元素的宽度

offset([coordinates])

作用: 获取元素距离窗口的偏移位

position()

作用: 获取元素距离定位元素的偏移位

demo实现获取：

   btns[0].onclick = function () {
                // 获取元素的宽度
                 console.log($(".father").width());
                
                 console.log($(".son").offset().left);
               
                console.log($(".son").position().left);
            }

（点击获取按钮）结果截图：

监听设置

与监听获取方法一样，在position()方法，注意点: position方法只能获取不能设置

positon()方法的结果：

demo:

 $(".son").position({
          left: 10
                 });

demo1:

$(".father").width("500px")

$(".son").offset({
      left: 10
});

demo2:

$(".father").width("500px")

$(".son").css({
      left: "10px"
 });

上面的demo1和demo2的运行结果（点击设置按钮），截图如下：