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>& ...
随机推荐
- [k8s]prometheus+alertmanager二进制安装实现简单邮件告警
本次任务是用alertmanaer发一个报警邮件 本次环境采用二进制普罗组件 本次准备监控一个节点的内存,当使用率大于2%时候(测试),发邮件报警. k8s集群使用普罗官方文档 环境准备 下载二进制h ...
- 【Android】12.5 利用Intent读取和更新通讯录
分类:C#.Android.VS2015: 创建日期:2016-02-23 修改日期:2016-03-08更正了未关闭cursor的bug. 一.简介 本节演示如何在安卓系统中通过用户配置文件(us ...
- ssh 连 koding
2014.12.10更新可用方法 koding是一个在线的开发平台.让自己从开发平台中释放出来.除了提供在线编程功能之外,Koding还有强大的社区功能,允许开发者通过相互浏览.交换代码而达到项目协作 ...
- maven(4)------maven核心pom.xml文件常用元素分析
在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...
- FZU Problem 2028 时空门问题
Problem Description 在一个N*M的地图上旅行.地图上有些地方可以走用. 表示,不能走用 # 表示.在可以走的地方上下左右移动一格需要一个单位时间.可以走的地方还有一些时空之门.时空 ...
- ny214 单调递增子序列(二) 动态规划
单调递增子序列(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给定一整型数列{a1,a2...,an}(0<n<=100000),找出单调递增最长子序 ...
- electron 的中文文档的地址 以及 窗口改变的步骤
electron的中文文档的地址: http://www.kancloud.cn/wizardforcel/electron-doc/137791 1.如何创建窗口和改变窗口: import { Br ...
- 【Java】ParseInt方法
parseInt()方法首先查看位置0处的 字符,判断它是否是个有效数字:如果不是,该方法将返回NaN,不再继续执行其他操作.但如果该字符是有效数字,该方法将查看位置1处的字符,进行同样的 测试.这一 ...
- SQLSERVER NULL值判断
sqlserver 在判断数据条件时,如果数据包含null的话则永远为false,null不参与判断,可以使用isnull(列,默认值)来判断null值的数据列,或者列 is null or 列的条件 ...
- anki插件推荐
记忆是一件需要反复重复的事情,可是怎么花最小的代价来重复呢? 著名的艾宾浩斯遗忘曲线是一个统计学的概念,非常具有参考价值,但是对于不同的人来说,是有差别的,另外操作起来也比较麻烦. 好在现在有许多记忆 ...