读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 ...
随机推荐
- leetcode—Best Time to Buy and Sell stocks III
1.题目描述 Say you have an array for which the ith element is the price of a given stock on day i. Des ...
- C++ 虚函数表与内存模型
1.虚函数 虚函数是c++实现多态的有力武器,声明虚函数只需在函数前加上virtual关键字,虚函数的定义不用加virtual关键字. 2.虚函数要点 (1) 静态成员函数不能声明为虚函数 可以这么理 ...
- algorithm@ 大素数判定和大整数质因数分解
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<time.h> #in ...
- Linux shell 常用
使用Linux shell是我每天的基本工作,但我经常会忘记一些有用的shell命令和l技巧.当然,命令我能记住,但我不敢说能记得如何用它执行某个特定任务.于是,我开始在一个文本文件里记录这些用法,并 ...
- 八成Java开发者解答不了的问题
统计数据来自Java“死亡”竞赛——一个针对开发者的迷你测验 几个月前,我们在一个小型网站上发布了一个称为Java“死亡竞赛”的新项目.测验发布后,超过20000位开发者参加了测验.网站以20道关于J ...
- EXCEL 建立工作薄与工作表
//1.引用单元 uses ComObj; //2.建立工作薄与工作表 procedure TForm1.Button1Click(Sender: TObject); Var ExcelApp,She ...
- 【STL源码学习】STL算法学习之四
排序算法是STL算法中相当常用的一个类别,包括部分排序和全部排序算法,依据效率和应用场景进行选择. 明细: sort 函数原型: template <class RandomAccessIter ...
- 10个Visual Studio原生开发调试技巧
10个Visual Studio原生开发调试技巧(1) 2013-05-29 13:30 佚名 开源中国 我要评论(1) 字号:T | T 以下的列表中你可以看到写原生开发的调试技巧(接着以前的文章来 ...
- PowerDesigner 物理数据模型(PDM)
PowerDesigner 物理数据模型(PDM) 说明 数据库脚本sqldatabasegeneration存储 目录(?)[+] 一. PDM 介绍 物理数据模型(Physical ...
- Java的位运算符实例——与(&)、非(~)、或(|)、异或(^)
一.Java的位运算符实例——与(&).非(~).或(|).异或(^) 1.与(&) 0 & 2 = 0 0 0 0 0 1 0 0 1 0 2.非(~) ~0 = 7 0 0 ...