我们可以使用 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. FPGA三分频,五分频,奇数分频

    我们在做FPGA设计时,有时会用到时钟频率奇数分频的频率,例如笔者FPGA的晶振为50M,当我们需要10M的时钟时,一种方式可以使用DCM或PLL获取,系统会内部分频到10M,但其实VERILOG内部 ...

  2. 【Android】3.10 热力图功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 热力图是用不同颜色的区块叠加在地图上描述人群分布.密度和变化趋势的一个产品,可利用自有数据,构建属于 ...

  3. MySQL数据库如何去掉数据库中重复记录

    对于常规的MySQL数据表中可能存在重复的数据,有些情况是允许重复数据的存在,有些情况是不允许的,这个时候我们就需要查找并删除这些重复数据,以下是具体的处理方法! 方法一:防止表中出现重复数据 当表中 ...

  4. 交叉编译busybox

    交叉编译器: 3.3.2# wget -c http://www.busybox.net/downloads/busybox-1.7.0.tar.bz2# tar jxvf busybox-1.7.0 ...

  5. js队列的实现问题

    所谓队列就是排队的序列问题,有出有进,比如在银行排队办理业务,一般都是前一个办理完成后下一个自动进入队列 <script>  /* * 模拟队列 */ var Qu ={}; //构造函数 ...

  6. C# 中正则表达式 Group 分组【转】

    http://www.cnblogs.com/kiant71/archive/2010/08/14/1799799.html 在一个正则表达式中,如果要提取出多个不同的部分(子表达式项),需要用到分组 ...

  7. C++ test的使用

    http://www.parasoft.com/jsp/trial_request.jsp?itemId=303 去下载,原来是个商业的测试软件,还要去购买,这个成本太大了.. http://down ...

  8. wp中的位图

    // // 摘要: // 使用提供的元素和变换初始化 System.Windows.Media.Imaging.WriteableBitmap 类的新实例. // // 参数: // element: ...

  9. pku1204 Word Puzzles AC自动机 二维字符串矩阵8个方向找模式串的起点坐标以及方向 挺好的！

    /** 题目:pku1204 Word Puzzles 链接:http://poj.org/problem?id=1204 题意:给定一个L C(C <= 1000, L <= 1000) ...

  10. warning: incompatible implicit declaration of built-in function &#39;exit&#39;

    warning: incompatible implicit declaration of built-in function 'exit' 解决方法:  在头文件里 引入 stdlib 文件, #i ...