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. nginx 静态目录配置规则

    1.子目录匹配 如下配置 location / { root /data/www; } 访问http://127.0.0.1/时,配匹配/data/www 访问http://127.0.0.1/ima ...

  2. Nginx负载均衡的5种策略(转载)

    Nginx的upstream目前支持的5种方式的分配 轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除. upstream backserver { s ...

  3. 2019PHP面试题最全面归纳总结

    1.请选择以下代码运行的结果: <?php if ('1e3' == '1000') echo 'LOL'; ?> A 无任何输出结果  B   LOL  C 不执行且报错 解析:1e3 ...

  4. VBS列出windows更新列表

    Set objSession = CreateObject("Microsoft.Update.Session") Set objSearcher = objSession.Cre ...

  5. 学用HBuilder开发App的看过来

    自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...

  6. emWin录音机,含uCOS-III和FreeRTOS两个版本

    第12期:录音机配套例子:V6-921_STemWin提高篇实验_录音机(uCOS-III)V6-922_STemWin提高篇实验_录音机(FreeRTOS) 例程下载地址: http://forum ...

  7. [Swift]LeetCode1 .两数之和 | Two Sum

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  8. [Swift]LeetCode171. Excel表列序号 | Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  9. Python Django(WEB电商项目构建)

    (坚持每一天,就是成功) Python Django Web框架,Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,模板T和视图V组成. 安装Pyth ...

  10. 记录一次安装OpenGL的漫长过程

    尝试codeblock和Dev-C++ 这学期新开了一门计算机图形图像的课,里面涉及到openGL,中午跑到图书馆开始倒腾OpenGL. 因为电脑里本来有codeblock,于是就想不用教材里面所说的 ...