一、操作样式类

// 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. C++ STL 常用拷贝和替换算法

    C++ STL 常用拷贝和替换算法 copy() 复制 vector<int> vecIntA; vecIntA.push_back(1); vecIntA.push_back(3); v ...

  2. variant conversion error for variable v23

    excel数据导入到oracle数据库出现的问题 V23指的是excel列.,这列的数据长度超出或者类型与数据库表不一致导致的 解决方法,1.清空该列,再建个新列 2.用access  SQL查出长度 ...

  3. PHP 字符串数组按照拼音排序的问题

    拼音排序的规则: 字符串包括特殊字符.数字.英文字符.中文字符等等,排序结果要求,特殊字符排在第一梯队,将其按照首个字符ascii码表进行排序,数字字符排在第二梯队,将首个字符数字按照数字大小排序,英 ...

  4. 洛谷 P1446 [HNOI2008]Cards 解题报告

    P1446 [HNOI2008]Cards 题目描述 小春现在很清闲,面对书桌上的\(N\)张牌,他决定给每张染色,目前小春只有\(3\)种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun ...

  5. Android中全屏 取消标题栏，TabHost中设置NoTitleBar的三种方法(转)

    Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法http://www.cnblogs.com/zdz8207/archive/2013/02/27/android- ...

  6. Educational Codeforces Round 63 (Rated for Div. 2) 题解

    Educational Codeforces Round 63 (Rated for Div. 2)题解 题目链接 A. Reverse a Substring 给出一个字符串,现在可以对这个字符串进 ...

  7. python 中的multiprocessing 模块

    multiprocessing.Pipe([duplex]) 返回2个连接对象(conn1, conn2),代表管道的两端,默认是双向通信.如果duplex=False,conn1只能用来接收消息,c ...

  8. java基础-引用数据类型之二维数组（Array）

    java基础-引用数据类型之二维数组(Array) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 之前我们学习过了Java的一维数组,所谓的二维数组就是元素是一堆一维数组的数组,换 ...

  9. bzoj千题计划171：bzoj2456: mode

    http://www.lydsy.com/JudgeOnline/problem.php?id=2456 任意删除序列中两个不同的数,众数仍然是众数 不停的删,剩下的最后的数一定是众数 具体实现: 记 ...

  10. Eclipse使用小结

    一.Eclipse新建工作空间设置默认编码格式UTF-8 1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->W ...