除了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. jmeter运行时间越久发送请求越来越少

    displayed. Size: 412152 > 204800,而且每次点击查看“察看结果树”后会导致jmeter卡死, 解决方法: step1.在user.property中增加 view. ...

  2. linux进程后台运行,且关终端后继续运行

    ctrl+z,fg,bg什么的都无法实现这一点.因为关终端之后就可能出问题 常用的命令如下 nohup /home/user/yourcommand.sh & nohup /home/user ...

  3. 硬盘 SMART 检测参数详解[转]

    一.SMART概述 硬盘的故障一般分为两种:可预测的(predictable)和不可预测的(unpredictable).后者偶而会发生,也没有办法去预防它,例如芯片突然失效,机械撞击等.但像电机轴承 ...

  4. EPI Server相关

    下载地址: http://world.episerver.com/download/Episerver-CMS/ 文档: http://world.episerver.com/documentatio ...

  5. 使用C# 链接 Mysql 显示？？？ 乱码 的解决方案

    下载以下文件 mysql-connector-odbc-5.3.6-win32.msi 下载并打开以下文件: mysql-installer-community-5.6.28.0.msi 安装mysq ...

  6. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素

    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...

  7. C#中int、long、float、double、decimal最大值最小值

    最近在将java上写的一个简单的表达式求值计算器移植到Windows Phone 8,java中double的精度问题是很明显的,解决办法是改用BigDecimal类.所以觉得C#中用double也是 ...

  8. nginx 环境下http和https(ssl)共存的方法

    80 443喘口共存之前是没问题的,但这次突然发现了这样的问题,htpps可以访问,但http不能访问会反回400 1xx.6x.x9.x8 - - [19/Jun/2017:16:04:28 +08 ...

  9. CNN及其可解释性

    https://stats385.github.io/readings https://arxiv.org/pdf/1311.2901.pdf A Mathematical Theory of Dee ...

  10. Techniques for HA IT Management

    7. Techniques That Address Multiple Availability Requirements Redundancy Hardware Redundancy Example ...