读jQuery官方文档:样式
样式
使用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官方文档:样式的更多相关文章
- 读jQuery官方文档:$(document).ready()与避免冲突
$(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...
- 读jQuery官方文档:数据方法与辅助方法
数据方法 有时候你可能想要在元素上面储存数据.由于浏览器兼容性问题,用原生JavaScript处理元素上的数据可能会造成内存溢出,jQuery可以帮你自动处理这些问题: //储存和取出元素数据 $(' ...
- 读jQuery官方文档:遍历
遍历 jQuery的快捷遍历方法可以快速定位到想要的元素.查找祖先元素 html<div class="grandparent"> <div class=&quo ...
- 读jQuery官方文档:jQuery对象
jQuery对象 当用$符号包裹一个CSS风格选择器的时候,你得到一个jQuery对象. var heading = $('h1'); jQuery对象是对DOM ELement封装过后的数组.注意, ...
- 读BeautifulSoup官方文档之与bs有关的对象和属性(1)
自从10号又是5天没更, 是, 我再一次断更... 原因是朋友在搞python, 老问我问题, 我python也是很久没碰了, 于是为了解决他的问题, 我只能重新开始研究python, 为了快速找回感 ...
- 读vue-cli3 官方文档的一些学习记录
原来一直以为vue@cli3 就是创建模板的工具,读了官方文档才知道原来这么有用,不少配置让我长见识了 Prefetch 懒加载配置 懒加载相信大家都是知道的,使用Import() 语法就可以在需要的 ...
- 读BeautifulSoup官方文档之html树的打印
prettify()能返回一个格式良好的html的Unicode字符串 : markup = '<a href="http://example.com/">I link ...
- 读BeautifulSoup官方文档之html树的搜索(1)
之前介绍了有关的四个对象以及他们的属性, 但是一般情况下要在杂乱的html中提取我们所需的tag(tag中包含的信息)是比较复杂的, 现在我们可以来看看到底有些什么搜索的方法. 最主要的两个方法当然是 ...
- 读BeautifulSoup官方文档之html树的修改
修改html树无非是对其中标签的改动, 改动标签的名字(也就是类型), 属性和标签里的内容... 先讲这边提供了很方便的方法来对其进行改动... soup = BeautifulSoup('<b ...
随机推荐
- HDU2015校赛 The Country List
今天手感真差..各种读错题意.水题... 就是说,给你几个串.如果长度一样并且相同位置字符相同(不分大小写)的个数大于两个就是不同串. #include<iostream> #includ ...
- Bzoj-2190 仪仗队 欧拉函数
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2190 简单的欧拉函数题,实际上就是求gcd(x,y)=1, 0<=x,y<=n ...
- 安装ADT
ubuntu下安装android开发环境. 打开eclipse,help---install new software,安装adt,一直提示无法连接到dl-ssl.google.com 由https改 ...
- 说点手动导jar包的细节Referenced Libraries
对于Referenced Libraries 若是手动,新建好Scala项目工程,这里取名为ScalaInAction 得需将Scala 2.11.8自带的,换成2.10.*版本 在其上,点击右键,B ...
- php透明合并png与jpg图片
源 <?php $png = imagecreatefrompng('./mark.png'); $jpeg = imagecreatefromjpeg('./image.jpg'); list ...
- python 访问限制
在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...
- PING命令入门详解(转载)
本文转自http://www.linkwan.com/gb/tech/htm/928.htm 1.Ping的基础知识 ping命令相信大家已经再熟悉不过了,但是能把ping的功能发挥到最大的人却并不是 ...
- Android AIDL 一探究竟
AIDL ---(Android Interface Definition Language)Android接口定义语言 简述: 1.什么时候使用? 通信方式 使用场景 AIDL IPC .多个应用程 ...
- 多线程基础及实例(java)
前言: 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是轻量级的进程 ...
- cocos2d-x 技能冷却特效
转自:http://blog.csdn.net/qiurisuixiang/article/details/8779540 1 在CSDN上看到某同学实现的Dota技能冷却效果,自己平时也玩Dota, ...