除了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. [CTCI] 双栈排序

    双栈排序 题目描述 请编写一个程序,按升序对栈进行排序(即最大元素位于栈顶),要求最多只能使用一个额外的栈存放临时数据,但不得将元素复制到别的数据结构中. 给定一个int[] numbers(C++中 ...

  2. 一些新东西学习 - Texture3D,Texture2DArray

    Texture3D Texture3D需要先在脚本中创建3D材质,然后赋予shader. 需要DX11支持,和材质采样一样,3D维度上可以被repleat和插值 参考文章:http://blog.cs ...

  3. [na]tcp&udp层各协议小结

    TCP和UDP 传输层功能: 可靠性:序列号.确认号&flag位 有效性:win滑动窗口 这篇目录索引: Tcp可靠性 Tcp流控 Tcp拥塞控制 Tcp运输连接管理 TCP的可靠性和流控 为 ...

  4. 【Android】Gesture Detector

    Gesture detector Android Touch Screen 与传统Click Touch Screen不同,会有一些手势(Gesture),例如Fling,Scroll等等. 这些Ge ...

  5. 【C/C++】struct探索·extern "C"含义探索 ·C++与C的混合编程·C 语言高效编程的几招

    本文为笔者阅读<嵌入式C精华>的摘录,推荐一下,不错的书 一.C/C++语言 struct深层探索 1.自然对界 struct是一种复合数据类型,其构成元素既可以是基本数据类型(如 int ...

  6. Asp.Net文件夹没有读写权限的特殊问题

    如果asp.net网站权限都配置正确,但是仍然出现某一个文件或者文件夹没有读写权限时 原来只用在Web.config里面的  <system.web>节点下增加<identity i ...

  7. Asp.Net解析json字符串

    方法一: using LitJson; string json= "{...........}"; JsonData jdData = JsonMapper.ToObject(js ...

  8. GreenDAO - primary key on multiple columns

    转:http://stackoverflow.com/questions/15250609/greendao-primary-key-on-multiple-columns Does GreenDAO ...

  9. RAID卡的缓存与磁盘自带的缓存的关系

    RAID卡是否有(启用)缓存对“随机读写”性能有巨大的影响.中高端的RAID卡都有缓存(价格也高). 那么RAID卡的缓存与磁盘自带的缓存是如何设置的? 戴尔服务器的perc H710 RAID卡有5 ...

  10. 把git上面的scala工程转为eclipse工程

    1,安装sbt工具,url:https://www.cnblogs.com/zeling/p/8494828.html 2,把插件添加到plugins.sbt文件中: addSbtPlugin(&qu ...