除了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. MySQL Metadata Lock详解

    Metadata Lock 的作用: 要直接说出Metadata Lock 的作用.以我目前的文字功底是不行的.好在我可以通过一个例子来说明. 假设session 1 在正在执行如下的SQL语句 se ...

  2. react-navigation使用技巧

      因为react-navigation之前存在的问题相对较多,本文更新会稍慢,而且,我现在项目使用的是基于它封装的react-native-router-fluxV4版本,现在也推荐给大家使用.在下 ...

  3. Atitit 图像处理类库安装与安装模式的前世今生与未来大趋势attilax总结.docx

    Atitit 图像处理类库安装与安装模式的前世今生与未来大趋势attilax总结.docx 1. 安装的原理,主要是解压,复制,设置三大步1 2. 目前我们常见的三大种安装模式,二进制模式与源码安装模 ...

  4. mysql protocol

    http://hutaow.com/blog/2013/11/06/mysql-protocol-analysis/ https://dev.mysql.com/doc/internals/en/cl ...

  5. 使用Windows 10专业版 进行VS2017开发 遇到 HTTP Error 400. The request hostname is invalid

    使用IIS Express 支持非localhost访问 只要使用域名或者本机IP地址都无法进行 iisexpress 调试  公网ip,还是127.0.0.1都出现上面那个错误 主要是新的系统环境 ...

  6. RIFF格式简介

    Resource Interchange File Format(简称RIFF),资源交换文件格式,是一种按照标记区块存储数据(tagged chunks)的通用文件存储格式,多用于存储音频.视频等多 ...

  7. wcout输出中文不显示

    准备使用UNICODE来写个控制台测试程序发现,cout无法输出UNICODE的中文字符.查找c++标准看到,其提供了wcin.wcout.wcerr.wclog用于处理wchar_t字符的输入输出. ...

  8. SQL Server 商业智能

    原帖:http://bbs.51cto.com/thread-1089708-1.html 商业智能概述一.数据仓库与分析服务(SSAS)二.集成服务(SSIS)三.报表服务(SSRS)以下是SQL ...

  9. maven relativePath

    父项目的pom.xml文件的相对路径.默认值为../pom.xml.maven首先从当前构建项目开始查找父项目的pom文件,然后从本地仓库,最有从远程仓库.RelativePath允许你选择一个不同的 ...

  10. Android使用AsyncTask异步线程网络通信获取数据（get json）

    摘要: android 4.0以上强制要求不能在主线程执行耗时的网络操作,网络操作需要使用Thead+Handler或AsyncTask,本文将介绍AsyncTask的使用方法. 内容: 1.添加Ht ...