样式

使用jQuery,无论是设置或者获取元素样式都十分简便。

// 支持驼峰式和分割线式,两种方式等价(原生JavaScript只支持驼峰式)
$('h1').css('fontSize');
$('h1').css('font-size');
//设置样式
$('h1').css('fontSize', '100px');
//设置多个样式
$('h1').css({
fontSize: '100px',
color: 'red'
});

其实设置多个元素时,给.css()传入的参数是一个对象,也可以这样:

var options = {
fontSize: '100px',
color: 'red'
};
$('h1').css(options);

客户端分为三层:

  • HTML-结构层
  • CSS-表现层
  • JavaScript-行为层

通常来说,建议使用.css()只用来获取样式,而不用来设置样式。因为使用.css()来设置样式破坏了客户端的三层结构,即在行为层混合了表现层的代码。

最好是定义一系列的CSS类,然后用jQuery给元素增加删除CSS类:

var $h1 = $('h1');
$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big'); if ($h1.hasClass('big')) {
//do something...
}

另外,也可以用jQuery来调整元素的尺寸、位置

//设置
$('h1').width('80px'); //获取
var width = $('h1').width(); //80 //获取位置, 返回一个包含元素位置信息的对象
$('h1').position();

读jQuery官方文档:样式的更多相关文章

  1. 读jQuery官方文档:$(document).ready()与避免冲突

    $(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...

  2. 读jQuery官方文档:数据方法与辅助方法

    数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...

  3. 读jQuery官方文档:遍历

    遍历 jQuery的快捷遍历方法可以快速定位到想要的元素.查找祖先元素 html<div class="grandparent"> <div class=&quo ...

  4. 读jQuery官方文档:jQuery对象

    jQuery对象 当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象. var heading = $('h1'); jQuery对象是对DOM ELement封装过后的数组.注意, ...

  5. 读BeautifulSoup官方文档之与bs有关的对象和属性(1)

    自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...

  6. 读vue-cli3 官方文档的一些学习记录

    原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...

  7. 读BeautifulSoup官方文档之html树的打印

    prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...

  8. 读BeautifulSoup官方文档之html树的搜索(1)

    之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...

  9. 读BeautifulSoup官方文档之html树的修改

    修改html树无非是对其中标签的改动, 改动标签的名字(也就是类型), 属性和标签里的内容... 先讲这边提供了很方便的方法来对其进行改动... soup = BeautifulSoup('<b ...

随机推荐

  1. HDU2015校赛 The Country List

    今天手感真差..各种读错题意.水题... 就是说,给你几个串.如果长度一样并且相同位置字符相同(不分大小写)的个数大于两个就是不同串. #include<iostream> #includ ...

  2. Bzoj-2190 仪仗队 欧拉函数

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2190 简单的欧拉函数题,实际上就是求gcd(x,y)=1, 0<=x,y<=n ...

  3. 安装ADT

    ubuntu下安装android开发环境. 打开eclipse,help---install new software,安装adt,一直提示无法连接到dl-ssl.google.com 由https改 ...

  4. 说点手动导jar包的细节Referenced Libraries

    对于Referenced Libraries 若是手动,新建好Scala项目工程,这里取名为ScalaInAction 得需将Scala 2.11.8自带的,换成2.10.*版本 在其上,点击右键,B ...

  5. php透明合并png与jpg图片

    源 <?php $png = imagecreatefrompng('./mark.png'); $jpeg = imagecreatefromjpeg('./image.jpg'); list ...

  6. python 访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...

  7. PING命令入门详解(转载)

    本文转自http://www.linkwan.com/gb/tech/htm/928.htm 1.Ping的基础知识 ping命令相信大家已经再熟悉不过了,但是能把ping的功能发挥到最大的人却并不是 ...

  8. Android AIDL 一探究竟

    AIDL ---(Android Interface Definition Language)Android接口定义语言 简述: 1.什么时候使用? 通信方式 使用场景 AIDL IPC .多个应用程 ...

  9. 多线程基础及实例(java)

    前言: 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是轻量级的进程 ...

  10. cocos2d-x 技能冷却特效

    转自:http://blog.csdn.net/qiurisuixiang/article/details/8779540 1 在CSDN上看到某同学实现的Dota技能冷却效果,自己平时也玩Dota, ...