jQuery操作属性和样式详解
我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性"。在 jQuery 中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性:
虽然我们可以使用removeAttr(name)删除元素属性,但是对应的 DOM 属性是不会被删除的, 只会影响 DOM 属性的值.比如将一个input元素的readonly元素属性去掉,会导致对应的 DOM 属性变成false(即input变成可编辑状态).
•修改 CSS 类和样式
下表是修改 CSS 类相关的 jQuery 方法：
<!doctype html><html lang="zh"><head> <meata charset="utf-8"/> <title>get object width</title> <script src="jquery-1.11.2.min.js"></script> <script> $(function() { alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff) alert("width():" + $("#testDiv").width()); //正确的数值 1264 alert("style.width:" + $("#testDiv")[0].style.width); //空值 }) </script></head><body> <div id="testDiv">test text</div></body></html>我们希望获取测试图层的宽度,使用 attr 方法获取"元素特性"为 undefined, 因为并没有为 div 添加 width。而使用 css()方法虽然可以获取到 style 属性的值, 但是在不同浏览器里返回的结果不同,IE6 下返回 auto,而 FF 下虽然返回了正确的数值但是后面带有"px"。所以 jQuery 提供了 width()方法,此方法返回的是正确的不带 px 的数值。
针对上面的问题,jQuery 为常用的属性提供了获取和设置的方法,比如 width()用户获取元素的宽度,而 width(val)用来设置元素宽度。
outerWidth 可以接受一个 bool 值参数表示是否计算 margin 值。
2. 位置相关 Positioning
jQuery操作属性和样式详解的更多相关文章
- JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
- 4月12日学习笔记——jQuery操作属性和样式
区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...
- jquery源码解析：jQuery静态属性对象support详解
jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...
- SQLAlchemy02 /SQLAlchemy对数据的增删改查操作、属性常用数据类型详解
SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 目录 SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 1.用se ...
- SQLAlchemy（二)：SQLAlchemy对数据的增删改查操作、属性常用数据类型详解
SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 目录 SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 1.用se ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- css控制UL LI 的样式详解(推荐)
代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...
随机推荐
- xapp1052之dma_test.v
dma_test是针对dma硬件设计的仿真测试文件,文件包括DMA写数据测试,DMA读数据测试以及DMA读写数据测试.这个测试文件其实就是模拟pc的应用程序对fpga设备进行DMA读写. DMA写测试 ...
- 对Android的恶意吐槽(勿看，有毒)
CSDN博客:http://blog.csdn.net/niu_gao 我觉得android系统中有一个特恶心人的大败笔.就是这个大败笔造成了android系统的卡卡卡不停. 这个大败笔就是对acti ...
- ssh-copy-id 安全地复制公钥到远程服务器上
[root@NB .ssh]# ssh-copy-id -i id_rsa.pub " -p22 root@150.57.38.226" root@150.57.38.226's ...
- Ubantu MySQL数据库操作
用户管理: 1.新建用户: >CREATE USER name IDENTIFIED BY 'ssapdrow'; 2.更改密码: >SET PASSWORD FOR name=PASSW ...
- 可视化工具连接mysql报1862【mysql修改登录密码】
1862是密码被修改了. 修改方法: 1.以root登录账户: 账户与密码都是root mysql -uroot -proot 2.修改密码 set password = password('1234 ...
- OpenLdap 相关命令
相关命令: |-slapd 目录服务的主要程序|-slurpd 目录服务进行复制的程序|-slapadd 向目录中添加数据|-slapcat 把目录中的条目导出成ldif文件|-slapindex 重 ...
- javascript 中 IE与FF的不同之处及其兼容写法
png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,siz ...
- war 宽度变窄
1.打开开始菜单-运行-输入Regedit 打开注册表编辑器 展开 HKEY_CURRENT_USER 继续展开 Software继续展开 Blizzard Entertainment 在Warcra ...
- 【Unity笔记】UGUI物体的Rect Transform组件（Pivot中心点，Anchor锚点）
Pivot:自身中心点,图标是小蓝点.表示图片以哪个点来计算坐标值.默认在UI元素的几何中心点(0.5, 0,5). Anchor:锚点,图标是四个小三角形.表示该UI元素以父物体的哪个位置作为缩放参 ...
- Ubuntu 12.04下NFS安装配置图解
以前就听说过nfs服务,但是一直没有用,在学习制作根文件系统的时候,才算是真正用上它了,我感觉它还不错,通过它“挂载”制作好的根文件系统.它在嵌入式中的角色就用下面的一张图说明吧! 用网线将主机与开发 ...