HTML标签可以自定义属性

HTML标签可以自定义属性,但是我们要考虑其在IE、Firefox以及chrome下的兼容性问题。
例如:

  1. <div id="newTest" myAttr="getAttr"></div>

复制代码

这里的“myAttr”就是这个标签的自定义属性了。

如果定义了属性却使用不了,那么这个属性就没有任何意义了,接下来就是如何去调用我们的自定义属性的值了。

在IE浏览器里,我们通过获取对象后直接调用就可以了

  1. document.getElementById("newTest").myAttr;

复制代码

在IE浏览器里,我们同样可以对其直接赋值而动态产生一个自定义属性:

  1. document.getElementById("newTest").newAttr = "new";

复制代码

在火狐和谷歌浏览器里,我们可以通过getAttribute方法来实现调用:

  1. document.getElementById("newTest").getAttribute("myAttr");

复制代码

在火狐和谷歌浏览器里,我们可以通过setAttribute方法在产生并设置一个自定义属性:

  1. document.getElementById("newTest").setAttribute("newAttr","new");

复制代码

自定义属性一般是我们用来存储数据或是相关依据的,根据实际情况,自定义属性其实很有用的。

测试浏览器:IE8,firefox 8.01,chrome 17.0.963.46 m
测试结果:能够获取到自定义属性

另外补充一点,如果不想做兼容判断,其实我们可以使用Jquery的attr方法来获取与设置自定义属性的值,目前测试结果是全兼容。

  1. $("#newTest").attr("myAttr");
  2. $("#newTest").attr("newAttr","new");

HTML标签自定义属性(转)的更多相关文章

  1. HTML自定义标签与标签自定义属性

    大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就 ...

  2. Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性

    Thymeleaf 之 内置对象.定义变量.URL参数及标签自定义属性 本文章来自[知识林] 如标题所述,这篇文章主要讲述Thymeleaf中的内置对象(list解析.日期格式化.数字格式化等).定义 ...

  3. 获取当前html标签自定义属性的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. Jquery学习笔记: attr和 prop的区别,以及为html标签自定义属性

    一.自定义html标签属性 对于html文件中的html标签,可以自定义属性,如: <a href="#" id="link1" action=" ...

  5. HTML标签自定义属性

    本文章转载至:http://www.cnblogs.com/luoyanli/archive/2012/10/17/2727886.html HTML标签可以自定义属性,但是我们要考虑其在IE.Fir ...

  6. 如何获取Input标签自定义属性的值?

    HTML代码: <input type="hidden" value="${Name?if_exists}" id='ID' busCode = &quo ...

  7. js原生图片懒加载 或 js原生图片预加载,html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  8. JQUERY获取html标签自定义属性值或data值

    //获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...

  9. 工作总结 获取html 标签 自定义属性值 根据html 自定义属性 获取 到标签

    FFID    HFID function getElementByAttr(tag, attr, value) { var aElements = document.getElementsByTag ...

随机推荐

  1. 【poj2342】 Anniversary party

    http://poj.org/problem?id=2342 (题目链接) 题意 没有上司的舞会... Solution 树形dp入门题. dp[i][1]表示第i个节点的子树当节点i去时的最大值,d ...

  2. 【转】set容器的基本操作

    set的基本操作:begin()         返回指向第一个元素的迭代器clear()         清除所有元素count()         返回某个值元素的个数empty()        ...

  3. 用requests库实现登录遇到的问题

    想登录zhihu,然后总是得到403 foribidden的错误,各种谷歌百度,得到结论说是输入错误或者是url错误,用fldder发现的确是url错了,post的地址是错误的 ==. 开始以为是#s ...

  4. appium按钮定位,去掉弹出框

    #coding=utf-8 这个一定要加上,不然脚本中注释中都不能有中文 ''' Created on 2015年7月2日 @author: liujuan ''' import sys reload ...

  5. hdu acmsteps 2.1.3 Cake

    Cake Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  6. 修复VirtualBox "This kernel requires the following features not present on the CPU: pae Unable to boot

    问题描述: 1.机器:Linux主机,特别是主机为大内存,比如: 4G内存的使用pae内核的Ubuntu系统的dell电脑. 2.情况:使用VirtualBox安装Linux系统时,比如:通过Virt ...

  7. 初学hibernate之缓存

    一.1.Session级别缓存属于一级缓存,持久化对象保存在Session一级缓存中(一级缓存引用持久化对象地址),只要session不关闭,一级缓存就存在,缓存中对象也不会被回收: Session会 ...

  8. POI读写Excel简述之写入

    二.POI写入Excel文件(以Excel2003版为例,2007版就是根据文件扩展名xlsx将HSSFWorkbook换为XSSFWorkbook,及其Sheet.Row.Cell也相应替换) 1. ...

  9. javaweb学习总结(三十)——EL函数库

    一.EL函数库介绍 由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 这些EL函数在JSTL开发包中进行描述,因此在JSP页 ...

  10. sockaddr & sockaddr_in struct

    struct sockaddr { unsigned short sa_family; /* address family, AF_xxx */ ]; /* 14 bytes of protocol ...