一、操作样式类

// 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. eclispe 出现超内存错误

    刚开始以为只要修改tomcat的最大最小内存就可以,结果还是报错,后来才懂需要在eclipse.ini文件中修改 -Xms256m-Xmx512m的值改大些,增加虚拟机运行的内存空间 刚开始最小值只有 ...

  2. C++ 构造函数初始化列表

    C++ 中类初始化列表执行顺序是按照定义的顺序执行,不是写在初始化列表的顺序执行 #include <bits/stdc++.h> using namespace std; class N ...

  3. 【BZOJ4991】我也不知道题目名字是什么（线段树）

    [BZOJ4991]我也不知道题目名字是什么(线段树) 题面 BZOJ 题解 对于线段树维护的区间维护以下东西: 区间左(右)端开始(结束)的最长(短)子串的长度 左端右端的值,以及当前区间内的答案 ...

  4. oracle的学习笔记

    Oracle的介绍 1. Oracle的创始人----拉里•埃里森 2. oracle的安装 [连接Oracle步骤](](https://img2018.cnblogs.com/blog/12245 ...

  5. 退出Android程序时清除所有activity的实现方法

    思路: 1. 自定义ActivityList管理类,添加删除维护该list; 2.Activity Stack 类似上面: 3.singleTask定义一个Activity为该启动模式,然后当返回时, ...

  6. 基于excel导入数据到ms sql server

    OLE DB (Object Linking and Embedding, Database, sometimes written as OLEDB or OLE-DB) an API designe ...

  7. Error: cannot allocate vector of size 88.1 Mb问题

    这几天训练模型运行代码的时候,老是提示我说:Error: cannot allocate vector of size 88.1 Mb,只知道分配空间不足. 下面是查资料看到的一些回答: 一.这个是R ...

  8. bzoj 5015 [Snoi2017]礼物 矩阵乘法

    5015: [Snoi2017]礼物 Time Limit: 15 Sec  Memory Limit: 512 MBSubmit: 163  Solved: 115[Submit][Status][ ...

  9. IOS的__bridge

    使用 __bridge 关键字来实现id类型与void*类型的相互转换.看下面的例子. id obj = [[NSObject alloc] init]; void *p = (__bridge vo ...

  10. JS动态更新微信浏览器中的title

    问题: 最近在做一个微信中分享的宣传页,分不同的场景,切换不同的场景时需要设置不同的title,实现的方案很简单,当用户切换场景的时候,修改document对象的title属性,可是在实际测试中,io ...