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. [LeetCode] Masking Personal Information 给个人信息打码

    We are given a personal information string S, which may represent either an email address or a phone ...

  2. Notepad++常用快捷键

    Ctrl-H    打开Find / Replace 对话框 Ctrl-D    复制当前行 Ctrl-L    删除当前行 Ctrl-T    上下行交换 F3    找下一个 Shift-F3   ...

  3. vue 值的更新

    用了vue开发了一段时间,基本上感觉都是比较好用的一个框架,刚开始还是会存在一些小坑的东西,这里先浅谈下值的更新问题. 1.本组件的一些变量,或者是主view(路由页面)一些值,是通过vuex 中st ...

  4. Python基础之面向对象3(继承)

    一.继承相关概念 1.语法: 2.定义: 3.优缺点: 4.相关概念: 5.相关内置函数: 6.继承内存图: 7.多继承: 二.多态相关概念 1.定义及作用: 2.重写概念: 3.运算符重载: 定义: ...

  5. unittest中的Empty suite错误

    import unittest from selenium import webdriver class ibdata(unittest.TestCase): @classmethod def set ...

  6. linux 重新生成网卡配置文件

    nmcli connection add con-name home type ethernet ifname eth1 autoconnect yes ip4 10.1.252.60/24 gw4 ...

  7. hibernate框架搭建

    hibernate框架的搭建步骤: 1.导包 2.创建数据库准备表 3.书写orm元数据(对象与表的映射配置文件) 4.书写配置文件 5.书写代码测试 一.导包: 创建web-maven工程添加hib ...

  8. HTTP协议概念与特点,HTTP的状态码,HTTPS是什么?

    很多人在打开网页的时候,在浏览器地址栏里都会看到http  ,在Java WEB里,HTTP也是个重点内容,今天我们就来详细了解和学习HTTP . HTTP是Hyper Text Transfer P ...

  9. netsh winsock reset命令

    公司一台电脑无法浏览网页,其他基本正常,鼓捣了一个多小时,依然无法解决.. 一开始按照正常思路,感觉是dns的问题,查看了下DNS,真是自定义的,于是改成自动获取,无效 重启了网卡,无效 重启电脑,无 ...

  10. linux下crontab的使用

    在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“cr ...