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>& ...
随机推荐
- 关于shell
操作系统本质上是一个应用程序,他负责硬件资源调度,文件系统管理等最底层的工作. 而shell是系统中一种特别的应用程序.之所以特别,是因为用户一切的操作都是经由shell来实现的. 和我们直接进行交互 ...
- .Net 三层架构开发初步
写在前面的话:在课堂上只是听老师讲过三层架构,知道大概是什么意思,我的理解就是将本来混合着写在一起的代码按功能性的不同分别写在不同的项目中,然后上层项目调用下层项目提供的接口,这样可以使代码的层次更清 ...
- 【转】PowerDesigner表结构和字段大小写转换
[转自]http://blog.csdn.net/xysh1991/article/details/8016192 使用方法:进入PowerDesigner,打开一个PDM,在菜单栏找到:Tools ...
- 一个div宽度不固定的左右居中效果
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 解决Ubuntu16的风扇高速旋转问题（双显卡）
问题描述 自从我的双显卡的笔记本装上Ubuntu 14 后,风扇狂转.发热巨大.网上一搜索估计是显卡驱动不太行.最近英伟达的Nvidia Prime可以完美地切换双显卡,安装这个软件后,风扇就不会狂转 ...
- JVM 内存分配机制总结
大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区),Heap(堆),Program Counter Register(程序计数器), VM Stack(虚拟机栈,也 ...
- mysql linux 区分大小写
查看大小写区分 mysql> show variables like "%case%"; +------------------------+-------+ | Varia ...
- js中Math.round、parseInt、Math.floor和Math.ceil小数取整小结【转】
[摘要:之前常常正在代码中看到Math.round.parseInt.Math.floor战Math.ceil那四个函数,固然晓得效果皆能够返回一个整数,然则对他们四者的差别照样没有太清晰,本日便做一 ...
- win8 X64 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序
操作系统是Windows 8 64位,安装了Microsoft Office 2013,从SQL Server 2008中导入Excel文件时出现提示: 未在本地计算机上注册“Microsoft.AC ...
- MyBatis 网络资料
http://mybatis.github.io/mybatis-3/zh/index.html 官方文档例子 http://blog.csdn.net/rootsuper/article/detai ...