一、操作样式类

// 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. (转)enable_from_this方法的使用与陷阱

    转自http://blog.chinaunix.net/uid-442138-id-2122464.html   enable_from_this 的使用与实现原理说明:   shared_from_ ...

  2. 【刷题】BZOJ 3591 最长上升子序列

    Description 给出1~n的一个排列的一个最长上升子序列,求原排列可能的种类数. Input 第一行一个整数n. 第二行一个整数k,表示最长上升子序列的长度. 第三行k个整数,表示这个最长上升 ...

  3. android:shape的使用（+圆角ListView）(转)

    http://dev.10086.cn/cmdn/wiki/index.php?doc-view-6087.html Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape ...

  4. 解题：SCOI 2010 序列操作

    题面 线段树......模板题(雾? 然而两种标记会互相影响,必须保证每次只放一个(不然就不知道怎么放了),具体的影响就是: 翻转标记会使得覆盖标记一起翻转,下放的时候就是各种swap 覆盖标记会抹掉 ...

  5. bzoj 2178 自适应Simpson积分

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...

  6. 旧题新做：从idy的视角看数据结构

    “今天你不写总结……!!!” 额…… 还是讲我的吧.这些考试都是idy出的题. 20170121:DFS序. ST表.线段树练习 这是第一次考数据结构. Problem 1. setsum 1 sec ...

  7. MVC4.0中cshtml中怎么解析html编码

    http://bbs.csdn.net/topics/391060108?page=1 问题描述: 数据库中存储带有格式的文本,如 <span style="color:#333333 ...

  8. Python高手之路【十一】python基础之面向对象

    创建类和对象 面向对象编程是一种编程方式,此编程方式的落地需要使用 “类” 和 “对象” 来实现,所以,面向对象编程其实就是对 “类” 和 “对象” 的使用. 类就是一个模板,模板里可以包含多个函数, ...

  9. 「Vue」v-html生成的图片大小无法调整的解决办法

    问题: v-html生成的图片调整大小属性没用<div class="content" v-html="pdinfo.content"></d ...

  10. LINUX 线程

    1.使用进程技术的优势(1)CPU时分复用,单核心CPU可以实现宏观上的并行(2)实现多任务系统需求(多任务的需求是客观的)2.进程技术的劣势(1)进程间切换开销大(2)进程间通信麻烦而且效率低3.解 ...