一、操作样式类

// 1.给标签添加样式类

$("选择器").addClass("类名")

// 2.移除标签的样式类

$("选择器").removeClass("类名")

// 3.判断标签是否含有某个样式类

$("选择器").hasClass("类名")

// 4.如果标签包含某个样式类，就移除，否则，就添加

$("选择器").toggleClass("类名")
<!DOCTYPE html>

<html>

<head>

    <title>操作样式类</title>

    <style type="text/css">

        .div1{

            width: 100px;

            height: 100px;

        }

        .bacc{

            background-color: red;

        }

        .border{

            border: 1px solid black;

        }

        .black1{

            background-color: black;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1. 添加一个样式类

        $(".div1").addClass("bacc border");

        // 2. 删除一个样式类

        $(".div1").removeClass("border");  // 移除一个类

        // 3. 判断是否包含某个样式类

        console.log($(".div1").hasClass("border"));  // false

        console.log($(".div1").hasClass("bacc")); // true

        // 4. 切换CSS类，如果有就移除，没有就添加

        $(".div1").on("click",function() {

            // body...

            $(this).toggleClass("black1");

        })

    </script>

</body>

</html>

操作样式类demo

二、操作CSS属性

// 1.获取标签CSS属性的值

$(".div1").css("backgroundColor")l

// 2.给标签CSS属性赋值

$(".div1").css("backgroundColor","red");

// 3.使用自定义对象 给标签CSS属性赋值

$(".div1").css({"backgroundColor":"green","border":"1px solid red"});

操作CSS属性代码：

<!DOCTYPE html>

<html>

<head>

    <title>操作CSS样式</title>

    <style type="text/css">

        .div1{

            background-color: black;

            width: 200px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1.获取标签的属性值

        console.log($(".div1").css("width"));

        // 2.给标签的属性赋值

        $(".div1").css("backgroundColor","red");// 将背景颜色改为红色

        // 3.通过自定义对象同时赋多个值

        $(".div1").css({"backgroundColor":"green","border":"1px solid red"});

    </script>

</body>

</html>

操作CSS属性demo

三、标签定位相关操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置

position()// 获取匹配元素相对父元素的偏移

　　()// 获取匹配元素相对滚动条顶部的偏移

scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：

<!DOCTYPE html>

<html>

<head>

    <title>操作元素的位置</title>

    <style type="text/css">

        body{

            margin: 0;

        }

        .div1{

            background-color: red;

            width: 100px;

            height: 100px;

            position: relative;

            top: 100px;

            left: 100px;

        }

    </style>

</head>

<body>

    <div class="div1">

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        // 1.获取匹配元素    在当前窗口的   相对偏移或设置元素位置

        console.log($("div.div1").offset()); // 相对于当前的窗口，元素的偏移量

        // 2.获取匹配元素相对父元素的偏移

        console.log($("div.div1").position());// 他的父元素就是body

        // 3.获取匹配元素相对滚动条顶部的偏移

        console.log($("div.div1").scrollTop());

        // 4.获取匹配元素相对滚动条左侧的偏移

        console.log($("div.div1").scrollLeft());

    </script>

</body>

</html>

获取标签元素的position

返回顶部代码：

<!DOCTYPE html>

<html>

<head>

    <title>返回顶部</title>

    <style type="text/css">

        .div1{

            margin: 0 auto;

            width: 1000px;

            height: 300px;

        }

        .backtop{

            width: 80px;

            height: 80px;

            text-align: center;

            line-height: 50px;

            font-size: 10px;

            position: fixed;

            bottom: 10px;

            right: 10px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <button class="backtop hide">返回顶部</button>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <div class="div1">

        1<br>    </div>

    <br>

    <script src="jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(window).scroll(function () {

            // body...

            if ($(window).scrollTop()>100){

                $(".backtop").removeClass("hide");

            }else{

                $(".backtop").addClass("hide");

            }

        })

        $(".backtop").on("click",function () {

            // body...

            $(window).scrollTop(0);

        })

    </script>

</body>

</html>

返回顶部示例

四、标签尺寸相关操作

height()  // 获取内容的宽度

width()   // 获取内同的高度

innerHeight()

innerWidth()

outerHeight()  // 内容+ 两边的边框

outerWidth()
<!DOCTYPE html>

<html>

<head>

    <title>操作尺寸</title>

    <style type="text/css">

        .div1{

            width: 100px;

            height: 100px;

            border: 1px solid red;

        }

    </style>

</head>

<body>

        <div class="div1">

        </div>

        <script src="jquery-3.3.1.js"></script>

        <script type="text/javascript">

            console.log($(".div1").height());

            console.log($(".div1").width());

            console.log($(".div1").innerHeight());

            console.log($(".div1").innerWidth());

            console.log($(".div1").outerHeight());  // 内容高度 + 两边边框

            console.log($(".div1").outerWidth());  // 内容宽度  + 两边的边框

        </script>

</body>

</html>

标签尺寸相关操作

jQuery-对标签的样式操作的更多相关文章

  1. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  2. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  3. jQuery基础-选择器，样式操作

    入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置 ...

  4. jQuery入门教程-CSS样式操作大全

    1.获取样式 2.设置样式 3.追加样式 4.移除样式 5.重复切换anotherClass样式 6.判断是否含有某项样式 7.设置 CSS 属性 参数 描述 name 必需.规定 CSS 属性的名称 ...

  5. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  6. JQuery第三天——CSS操作与JQuery事件

    JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...

  7. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  8. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  9. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

随机推荐

  1. MT【126】点对个数两题之二【图论】

    在平面上有\(n\) 个点$S={x_1,x_2\cdots,x_n}, $ 证明在这 \(n\) 个点中距离为 \(1\) 的点对数不超过 \(\dfrac{n}{4}+\dfrac{2}{2}n^ ...

  2. 【集训】练习题 uria

    Description 求有多少组正整数对 \((a, b)\) 满足 \(a + b ≤ n\) \(a + b | ab\) \(n ≤ 10^14\) Solution 这题有点绕啊 设 \(g ...

  3. 求n个数中前k个数，按之前的顺序输出(HK IPM)

    For smaller k: #include <cstdio> #include <cstdlib> #include <cstring> #include &l ...

  4. hackerrank答案

    regex: https://github.com/taiyang-li/hackerrank/tree/master/hackerrank/regex-exercise awk: https://g ...

  5. merger_by_one 处理二维数组,根据里面某字段合并, 里面有的保留,有的求和~~

    public function tt(){ $param = array( array ( 'hykno' => '2222222-CB', 'tcdk_fid' => '458B6D70 ...

  6. Centos下Vim编辑器基本配置

    设置 Vim编辑环境 配置 有两种方式: 1,是在/etc/vimrc 进行设置,这种设置方法会作用与所有登录到Linux环境下的用户.不建议使用. 2,在用户登录的 ~ 目录下创建一个 .vimrc ...

  7. NO.2day 操作系统基础

    操作系统基础 1.为什么要有操作系统 操作系统为用户程序提供一个更好.更简单.更清晰的计算机模型,并管理刚才提到的所有设备(磁盘.内存.显示器.打印机等).程序员无法把所有的硬件操作细节都了解到,管理 ...

  8. P3572 [POI2014]PTA-Little Bird

    P3572 [POI2014]PTA-Little Bird 一只鸟从1跳到n.从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制k,求每次最少耗费多少体力 很简短的题目哼. ...

  9. day13 类的补充

    访问修饰符                          同包                          不同包 本类         子类         非子类        子类   ...

  10. 查看oracle数据库编码：

    1.客户端编码 查看方法:打开数据库所在服务器的注册表(在运行窗口中输入regedit打开)HKEY_LOCAL_MACHINE->SOFTWARE->ORACLE->HOME0-& ...