JQuery提供了一个处理方法,可以获取或设置元素的CSS属性。
// 获取 CSS 属性
$( "h1" ).css( "fontSize" ); // 返回一个字符串,例如"19px"
$( "h1" ).css( "font-size" ); // 这也是可以的
// 设置 CSS 属性
$( "h1" ).css( "fontSize", "100px" ); // 设置一个属性
// 设置多个属性
$( "h1" ).css({
fontSize: "100px",
color: "red"
});

需要注意的是,设置多个属性的时候,参数是一个对象,这个对象包含了多个属性。JQuery的setter方法接收这样的对象作为参数可以一次完成多属性的设置工作。

  • 使用Class
    如果只是想读取CSS样式,可以使用.css()方法,但是如果是要设置CSS样式,那么最好是编写CSS规则类来描述样式,然后再去改变元素的class。
var $h1 = $( "h1" );
$h1.addClass( "big" ); // 添加class
$h1.removeClass( "big" ); // 移除class
$h1.toggleClass( "big" );// 切换class,根据class是否存在以及第二参数决定添加或移除class
if ( $h1.hasClass( "big" ) ) { // 判断class是否包含“big”
}

class也是非常有用的,可以存储元素的状态信息,例如元素是否被选择。

  • 尺寸
    JQuery提供了一些很有用的方法来获取或设置一个元素的尺寸和位置。
// 设置所有元素的宽度
$( "h1" ).width( "50px" );
// 获取第一个元素的宽度
$( "h1" ).width();
// 设置所有元素的高度
$( "h1" ).height( "50px" );
// 获取第一个元素的高度
$( "h1" ).height();
// 返回一个对象包含了第一个元素的位置信息,相对于父节点的偏移
$( "h1" ).position();

JQuery官方学习资料(译):CSS的更多相关文章

  1. JQuery官方学习资料(译):类型

    类型     JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...

  2. JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象

        JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each()     $.each()是一个通用的方法用来遍历对象和数组, ...

  3. JQuery官方学习资料(译):JQuery对象

        每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...

  4. JQuery官方学习资料(译):选择元素

    选择元素     JQuery最基本的概念是“选择一些元素并让它们做些什么”.JQuery支持大部分的CSS3的选择器,以及一些非标准的选择器. 通过ID选择元素 $( "#myId&quo ...

  5. JQuery官方学习资料(译):使用JQuery的.index()方法

        .index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...

  6. JQuery官方学习资料(译):Utility方法

        JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim()     删除前后部的空白内容. // 返回 "lots of ex ...

  7. JQuery官方学习资料(译):Data方法

        你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...

  8. JQuery官方学习资料(译):遍历

        一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...

  9. JQuery官方学习资料(译):操作元素

      获取和设置元素的信息     有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...

随机推荐

  1. SPARK-AM-TrackURL-UI-500

    HTTP ERROR 500 Problem accessing /proxy/application_1538120222810_0072/. Reason: Connection refused ...

  2. js拼接字符串后swiper不能动的解决方案

    swiper的配置一定要放在拼接字符串之后,紧随其后,如果放在其他的位置,swiper是不识别HTML的.

  3. Conda命令指标

    一.Conda相关指令 # 查看当前环境下已安装的包 conda list # 查看某个指定环境的已安装包 conda list -n tensorflow # 查找package信息 conda s ...

  4. 深入解析ConcurrentHashMap类

    以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新的扩容 ...

  5. 值得收藏!!javascript数组中多条对象去重方式,很实用!!!

    在数组中都是数字的时候很好去重,例如:var  arr=[1,2,2,2,3,4,5,4,5,3,6]:可以用两层for循环或者其他方式进行去重 我在这里也给出一个方法吧: Array.prototy ...

  6. Dubbo工作原理,集群容错,负载均衡

    Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. Registry:服务 ...

  7. LeetCode724. 寻找数组的中心索引

    1.题目描述 给定一个整数类型的数组 nums,请编写一个能够返回数组“中心索引”的方法. 我们是这样定义数组中心索引的:数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和. 如果数组不存在中 ...

  8. 10 个深恶痛绝的 Java 异常。。

    异常是 Java 程序中经常遇到的问题,我想每一个 Java 程序员都讨厌异常,一 个异常就是一个 BUG,就要花很多时间来定位异常问题. 什么是异常及异常的分类请看这篇文章:一张图搞清楚 Java ...

  9. React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题

    首先 导航链接应该使用  NavLink 而不再是  Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...

  10. 8.Git分支-分支的创建与合并-01

    1.新建分支  git checkout -b <branch-name>  创建一个分支并且切换到这个分支.  git checkout -b <branch-name> = ...