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. npm install命令详解

    -S,–save 安装包信息将加到dependencies(生产阶段的依赖) npm install --save 或 npm install -S -D, –save-dev 安装包信息将加到dev ...

  2. 20175324 2018-2019-2 《Java程序设计》第5周学习总结

    20175324 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 抽象类和具体类的区别在于抽象类中有抽象方法而具体类中没有.且抽象类不能实例化. 接口:如果一 ...

  3. 2019_BUAAOO_第二单元总结

    第一次作业:单部多线程傻瓜调度电梯 设计策略 本次作业我才用的是生产者消费者模式,创建一个RequestList类,将输入线程InputThread作为生产者,负责将请求放入RequestList:将 ...

  4. scala Actor Akka

    推荐博客:过往记忆 https://www.iteblog.com/archives/1154.html akka.io

  5. 配置NFS固定端口

    NFS启动时会随机启动多个端口并向RPC注册,为了设置安全组以及iptables规则,需要设置NFS固定端口.NFS服务需要开启 mountd,nfs,nlockmgr,portmapper,rquo ...

  6. JS 多选文件或者选择文件夹

    <%--文件多选--%> <input type="file" name="file" id="file" multipl ...

  7. react-quill 富文本编辑器 ---- 图片处理

    import React,{Component} from 'react'; import ReactQuill,{ Quill } from 'react-quill'; import 'react ...

  8. 使用AOP实现方法执行时间和自定义注解

    环境:IDEA2018+JDK1.8+SpringBoot 第一步:在pom文件中引入依赖(度娘有很多(*^▽^*)): <!--引入AOP的依赖--><dependency> ...

  9. redhat 6 红帽6 Linux 网络配置

    [root@ORAMYSQL ~]# cd /etc/sysconfig/network-scripts/ 切换到网卡配置目录 [root@ORAMYSQL network-scripts]# vi ...

  10. Servlet, Struts2和SpringMVC 并发访问线程安全问题

    第一部分: Servlet不是线程安全的. 要解释Servlet为什么不是线程安全的,需要了解Servlet容器(即Tomcat)使如何响应HTTP请求的. 当Tomcat接收到Client的HTTP ...