除了css()以外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法，语法如下：

高度和宽度示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CSS-DOM操作演示示例</title>

    <style>

      .hot{

          color: #ff0000;

      }

      a{

          color: #000000;

          text-decoration: none;

      }

    </style>

    <!--引入jQuery-->

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

    <!--javascript-->

    <script>

        $(function(){

            // 设置height()和width()都是200

            $("li").find("span").css({"display":"block","border":"1px solid red"}).width(200).height(200);

        });

    </script>

</head>

<body>

    <img src="ad.jpg" alt="1" />

    <img src="ad.jpg" alt="2" />

    <img src="ad.jpg" alt="3" />

    <ul>

        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>

        <li><a href="#">苹果iPad mini</a></li>

        <li><a href="#">三星GALAXY III</a></li>

        <li><a href="#">苹果iPhone 5s</a></li>

    </ul>

    <input type="button" value="点击按钮" />

</body>

</html>

效果：

元素相对位置示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CSS-DOM操作演示示例</title>

    <style>

      .hot{

          color: #ff0000;

      }

      a{

          color: #000000;

          text-decoration: none;

      }

    </style>

    <!--引入jQuery-->

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

    <!--javascript-->

    <script>

        $(function(){

            // 设置height()和width()都是200

            //$("li").find("span").css({"display":"block","border":"1px solid red"}).width(200).height(200);

            //offset

            $("input[type='button']").click(function(){

            var x=$("span").offset();

            console.log(x);

            $("span").text("横坐标:"+x.left+",纵坐标:"+x.top);

            });

        });

    </script>

</head>

<body>

    <img src="ad.jpg" alt="1" />

    <img src="ad.jpg" alt="2" />

    <img src="ad.jpg" alt="3" />

    <ul>

        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>

        <li><a href="#">苹果iPad mini</a></li>

        <li><a href="#">三星GALAXY III</a></li>

        <li><a href="#">苹果iPhone 5s</a></li>

    </ul>

    <input type="button" value="点击按钮" />

</body>

</html>

效果：

jQuery（十）：CSS-DOM操作的更多相关文章

  1. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  2. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  3. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  4. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  5. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  6. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  7. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  8. （七）jQuery中的DOM操作

    一.jQuery的DOM操作 (1)查找节点: 查找元素节点: 1. 获取指定的标签节点 $(“上级标签 标签:eq(“标签索引”) ;  如:var li = $("ul li:eq(2) ...

  9. 锋利的jQuery ——jQuery中的DOM操作（三）

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  10. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

随机推荐

  1. php分享二十七：批量插入mysql

    一:思考 1:如果插入的某个字段大于数据库定义的长度了,数据库会怎么处理? 1>如果数据库引擎是myisam,则数据库会截断后插入,不报错 2>如果数据库引擎是innodb,则数据库会报 ...

  2. MQ有啥用

    Q:最近看了一些MSMQ的资料,感觉很是奇怪,在IIS中装上此服务后,感觉这东西就像一个小数据库一样,暂时保存一些发送过来的数据,然后另一端再去收取?A:是的. Q:这样有什么用呢?直接在数据库中建立 ...

  3. 【Unity】第5章 3D坐标系和天空盒

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 这一张主要介绍3D坐标系的基础知识以及各种形状的天空盒. 二.示例 本章的示例都在ch05Demos工程下.

  4. 【Android】1.2 创建Android模拟器

    分类:C#.Android.VS2015:  创建日期:2016-01-20 调试手机应用程序一般先用模拟器来实现,只是因为每次都发布到手机上调试太麻烦了.当应用程序在模拟器上调试没错后,再发布到手机 ...

  5. Requests: 让 HTTP 服务人类

    requests 2.18.1文档 requests流式post文件 Calling SOAP Web service using requests module of

  6. 内网ip范围

    局域网可使用的网段(私网地址段)有三大段:10.0.0.0~10.255.255.255(A类)172.16.0.0~172.31.255.255(B类)192.168.0.0~192.168.255 ...

  7. scope_identity() 与 @@identity的区别

    在一条 INSERT.SELECT INTO 或大容量复制语句完成后,@@IDENTITY 中包含语句生成的最后一个标识值.如果语句未影响任何包含标识列的表,则 @@IDENTITY 返回 NULL. ...

  8. tensorflow笔记5：tensorflow的基本运作，函数

    转载:https://blog.csdn.net/lenbow/article/details/52152766 1.tensorflow的基本运作 为了快速的熟悉TensorFlow编程,下面从一段 ...

  9. iOS开发之二维码扫描

    二维码扫描 01-导入系统库 02 新建继承自UIView的 LHQPreView 2.1导入系统库头文件 #import <AVFoundation/AVFoundation.h> 2. ...

  10. SM2椭圆曲线公钥密码算法

    国家必须要有属于自己的一套加密机制才行...好复杂.分享下看哪位看得懂其中的原理 国家密码管理局于2010年12月17日发布了SM2椭圆曲线公钥密码算法,并要求为对现有基于RSA算法的电子认证系统.密 ...