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. Linux系统如何添加IP别名

    IP别名可以在一块物理网卡上绑定多个IP地址,这样就能够在使用单一网卡的同一个服务器上运行多个基于IP的虚拟主机,简单来说,IP别名就是一张物理网卡上配置多个IP,实现类似子接口之类的功能. 那么IP ...

  2. js高级3

    1.解决函数内this的指向 可以在函数外提前声明变量_this/that=this 通过apply和call来修改函数内的this指向 (1)二者区别 用法是一样的,就是参数形式不一样        ...

  3. 前端基础之BOM和DOM

    关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser  object  Model)是指浏览器对象模型,它使JavaScript有能力 ...

  4. 面试作业之浅析京东促销活动核心模型 - DDD

    前言 京东作为中国最大的自营式B2C电商平台,提供一站式综合性购物,服务亿万家庭,涵盖3C.家电.消费品.服饰.家居家装.生鲜和新通路(B2B),满足了消费者的多元化需求.每天都会发布相关的促销活动, ...

  5. Java synchronized和 Lock 的区别与用法

    在分布式开发中,锁是线程控制的重要途径.Java为此也提供了2种锁机制,synchronized和lock.做为Java爱好者,自然少不了对比一下这2种机制,也能从中学到些分布式开发需要注意的地方.  ...

  6. Batch入门教程丨第一章:部署与Hello World!(上)

    Batch入门教程 在本教程中,您将了解并学习与Windows Batch有关的知识和编程方法,用以解决在日常生活中所遇到的简单问题,或者利用Windows Batch建立一个最初级的编程思维方式. ...

  7. [Swift]LeetCode754. 到达终点数字 | Reach a Number

    You are standing at position 0 on an infinite number line. There is a goal at position target. On ea ...

  8. [Swift]LeetCode829. 连续整数求和 | Consecutive Numbers Sum

    Given a positive integer N, how many ways can we write it as a sum of consecutive positive integers? ...

  9. [Swift]LeetCode358. 按距离为k隔离重排字符串 $ Rearrange String k Distance Apart

    Given a non-empty string str and an integer k, rearrange the string such that the same characters ar ...

  10. javascript时间戳与日期格式之间的互转

    1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 ...