我们可以使用 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操作属性和样式详解的更多相关文章

  1. JQuery操作属性、样式、风格(attr、class、css)

    样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...

  2. 4月12日学习笔记——jQuery操作属性和样式

    区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus ...

  3. jquery源码解析：jQuery静态属性对象support详解

    jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...

  4. SQLAlchemy02 /SQLAlchemy对数据的增删改查操作、属性常用数据类型详解

    SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 目录 SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 1.用se ...

  5. SQLAlchemy（二)：SQLAlchemy对数据的增删改查操作、属性常用数据类型详解

    SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 目录 SQLAlchemy02 /SQLAlchemy对数据的增删改查操作.属性常用数据类型详解 1.用se ...

  6. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  7. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

  8. 教程-Delphi中Spcomm使用属性及用法详解

    Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...

  9. css控制UL LI 的样式详解(推荐)

    代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...

随机推荐

  1. [Mongodb] 借mongodb被入侵勒索事件，谈下Linux服务器端口安全问题

    一.缘由: 最近几天Mongodb勒索事件甚嚣尘上:由于对外网开放访问并且没有开启授权机制被删库.远程拖库.勒索.接着又曝出Elasticsearch被勒索事件,缘由一样,Elasticsearch服 ...

  2. HBase性能优化方法总结（二）：写表操作

    转自:http://www.cnblogs.com/panfeng412/archive/2012/03/08/hbase-performance-tuning-section2.html 本文主要是 ...

  3. 拷贝内容到eclipse中导致JSP的auto-completion不工作

    刚才在编辑JSP文件,有一些东西我懒得敲了,就把一些代码里面拷贝到eclipse的editor中,结果你猜怎么,拷贝进去以后,jsp的auto-completion居然不工作了!(即<%%> ...

  4. bnuoj16491

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=16491 题意:有t组测试数据,每组测试数据第一行为n,m,接下来有n种跑法,m为最大的能力,每一种跑 ...

  5. dp之多维背包hdu4501

    思路:将v1,v2,k都当作一种体积,每种物品只能取一次,求max....... 反思:以前写背包,由于只有一个体积,所以习惯性的在for中,就所取的最小值限制,而在这次,因为这里导致wa了,具体是因 ...

  6. C语言一闪而过

    头文件#include<stdlib.h> main函数system("pause");

  7. [shell]shell脚本统计数值大小

    #! /bin/bash array=( ... ) var1= var2= ;i<=;i++)); do array[i]="$( cat /sys/bus/iio/devices/ ...

  8. c++的内存分配

    C++堆和栈的分配 腾讯.金山笔试常考 栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈. 堆区(heap) — 一般由程序员分配释放, ...

  9. JAVA的包装类2 【转】

    怎么理解JAVA中的“包装类” JAVA是一种面向对象语言,java中的类把方法与数据连接在一起,构成了自包含式的处理单元.但在JAVA中不能定义基本类型(primitive  type)对象,为了能 ...

  10. Nginx动静分离知识及配置

    Nginx动静分离知识及配置,本质上与分离上传下载功能是相同功能,本质就是在文件服务器也是需要部署WEB应用的,只是在进行代理分离的时候分配到对应的文件服务器上去. 随着Nginx高性能Web服务器大 ...