这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下
 

getAttribute

该方法用来获取元素的属性,调用方式如下所示:

复制代码代码如下:
object.getAttribute(attribute)

以此前介绍的一些方法不同,getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象来调用。

该方法只接受一个参数,你指定要查询的属性的名字。如果指定的属性没有设置,结果将返回null对象。

setAttribute

以上面作用相反的是setAttribute,该方法被用来设置元素节点的属性。调用方式如下所示:

复制代码代码如下:
object.setAttribute(attribute)

该方法只接受一个参数,即你要设置的属性。

拓展阅读

通过setAttribute对文档做了修改之后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

上面的两个方法属于DOM Level 1中新增的API,在他们出现之前,可以通过另外一种方法来实现,举例如下

获取属性:

复制代码代码如下:
var val = element.attribute //获取属性

上面的等价于

复制代码代码如下:
var val = element.getAttribute('attribute');   

设置属性:

复制代码代码如下:
element.attribute = "the new value";

其等价于

复制代码代码如下:
element.setAttribute("attribute", "the new value");    

如果你想偷懒少敲键盘的话,那么推荐上面的方式,不过最佳实践还是要推崇DOM标准,即使用setAttribute和getAttribute。

JavaScript设置获取和设置属性的方法的更多相关文章

  1. Java反射学习-1 - 反射获取类的属性,方法,构造器

    新建一个Person类 package cn.tx.reflect; /** * 注解初步了解 * @author Administrator * */ public class Person { p ...

  2. JavaScript之获取和设置元素属性

    1.与我前面的随笔获取元素的那些方法不同http://www.cnblogs.com/GreenLeaves/p/5689075.html 获取元素属性的方法getAttribute()不属于docu ...

  3. jquery - 设置/获取内容和属性

    一般我们会遇到给某个元素添加或更改原有的文字: 1. 设置/获取内容 - text().html() 以及 val() 设置内容常用的三个方法: text() - 设置或返回所选元素的文本内容 htm ...

  4. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  5. jquery获取内容和属性的方法

    通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...

  6. JavaScript之Object对象常用属性与方法手册

    MDN Object参考地址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Obje ...

  7. 全面理解Javascript中Function对象的属性和方法

    http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...

  8. javascript中的array对象属性及方法

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  9. javascript面向对象方式,调用属性和方法

    1.定义一个Person类,其中的属性和方法如果想对外开放,需要使用this,如: var Person=function(name,age,sex){ var psex='Boy'; if(sex) ...

随机推荐

  1. Qt Qwdget 汽车仪表知识点拆解4 另类进度条实现

    先贴上效果图,注意,没有写逻辑,都是乱动的 注意看一下,右面的这两个进度条,有瑕疵,就是我没有把图片处理干净,这里犹豫我不知道这个具体的弧度,也没法绘制,就偷懒了 现在上面放一个UI,把两个进度条抠空 ...

  2. 深挖 NGUI 基础 之UIRoot (一)

    当你开始使用NGUI的时候,简单的从项目视图 中一个”Control”预设体 拖拽到场景视图中,你将会发现 Hierarchy层次面板中会出现以下层次结构: 其中 UI Root作为根节点,是每个NG ...

  3. 5、shader混合(Blending)、雾

    直接上效果图:queue:transparent 雾: fog { mode exp color(0.6,0.4,0.3,0.8) density 0.3 range ,0.8 } 效果: http: ...

  4. 问题 A: a+b

    问题 A: a+b 时间限制: 1 Sec  内存限制: 32 MB提交: 285  解决: 124[提交][状态][讨论版][命题人:外部导入] 题目描述 实现一个加法器,使其能够输出a+b的值. ...

  5. IDE API SDK JDK

    一.IDE 英文全称:Integrated Development Environment 中文名称:集成开发环境 本质:应用程序 功能:提供程序开发环境 组成:代码编辑器.编译器.调试器.图形用户界 ...

  6. Java中动态代理实现原理深究

    一.前言 笔者平时开发使用“动态代理”不多,最近在看设计模式的时候,“动态代理”又在面前晃了几次,所以这次想从源码的角度去分析动态代理的实现原理,以窥探其精妙~ 二.正文 2.1 静态代理  本文源码 ...

  7. JavaScript获取访问设备信息

    <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>JavaScript获取访问设备信息</tit ...

  8. thymeleaf支持java8的日期实例

    一.实体 @Entity public class Customer { @Id @GenericGenerator(name="generator",strategy = &qu ...

  9. Palindrome [Manecher]

    Palindrome Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 12214 Accepted: 4583 Descript ...

  10. wget、yum、rpm、apt-get区别

    wget 类似于迅雷,是一种下载工具, 通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理 名字是World Wide Web”与“get”的结合. yum: 是 ...