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>& ...
随机推荐
- Rokid开发者社区skill之【历史上的今天】之简介+玩法+设计+实现+心得
Skill简介: 来源:好奇心.探索欲.趣味性: 资源:百度百科: 方式:实时获取,自动更新: 技能玩法: 想要进入历史上的今天这个skill,则对若琪说:若琪,打开历史上的今天. 想要了解某天的历史 ...
- 在开发JavaBean的过程中打开Tomcat的reloadable
这样可以方便调试,就不用每次修改JavaBean都要重启服务器了,但是要记得,项目deploy阶段的时候要关闭这个选项(考虑服务器的性能问题) 配置Tomcat的/conf/server.xml即可 ...
- #include <algorithm>中sort的一般用法
1.sort函数的时间复杂度为n*log2(n),执行效率较高. 2.sort函数的形式为sort(first,end,method)//其中第三个参数可选. 3.若为两个参数,则sort的排序默认是 ...
- sqlserver 的一些好用的插件
sqlserver 的一些好用的插件 1.http://www.red-gate.com/products/
- MySQL基本命令和操作
开启和关闭mysql服务 Windows下开启和关闭mysql服务 net start mysql # 开启mysql服务 net stop mysql # 关闭mysql服务 没有重启mysql服务 ...
- C语言 · 素数求和
算法提高 素数求和 时间限制:1.0s 内存限制:256.0MB 问题描述 输入一个自然数n,求小于等于n的素数之和 样例输入 2 样例输出 2 数据规模和约定 测试样例保证 2 & ...
- [转]Python Web部署方式总结
学过PHP的都了解,php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Python在web应用上的部署就繁杂的多,主要是工具繁多,主流服务器支持不足,在了 ...
- Java-ThreadLocal，Java中特殊的线程绑定机制
在DRP项目中,我们使用了ThreadLocal来创建Connection连接,避免了一直以参数的形式将Connection向下传递(传递connection的目的是由于jdbc事务要求确保使用同一个 ...
- RTMP规范 消息与消息块
Real Time Messaging Protocol(实时消息传输协议) 应用层协议 RTMP协议中, 基本数据单元称为消息(Message).当RTMP协议在互联网中传输数据的时候,消息会被拆分 ...
- CSS实现圆角六色渐变自适应按钮
Css代码 .g_a{display:-moz-inline-stack; display:inline-block; border-bottom:1px solid #cccccc; border- ...