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. 2-SAT开坑

    Reference:http://blog.csdn.net/jarjingx/article/details/8521690 其中伍昱的ppt不错. 2SAT最裸的模型: 一国有n个党派,每个党派在 ...

  2. easyui 动态修改窗口title

    http://blog.csdn.net/liu251890347/article/details/39292307?utm_source=tuicool 使用easyui作为前台框架极大的节省了项目 ...

  3. NSThread - (void)start vs java Thread implements Runnable

    This method spawns the new thread and invokes the receiver’s main method on the new thread. If you i ...

  4. iOS欢迎界面Launch Screen动态加载广告

    有许多应用程序在打开的时候,欢迎界面会加载一张连网获取的广告图片或者显示一组动画,这样的效果是如何做到的呢?下面给大家介绍一种简单的实现加载广告的方式. 程序运行起来,欢迎界面之后,会进入AppDel ...

  5. (转)win32Application和win32ApplicationConsole

    这几天在创建MFC项目时,常常遇到一下两个连接错误,例如: 1. LIBCD.lib(crt0.obj) : error LNK2001: unresolved external symbol _ma ...

  6. Entity Framework 系统约定配置

    前言 Code First之所以能够让开发人员以一种更加高效.灵活的方式进行数据操作有一个重要的原因在于它的约定配置.现在软件开发越来越复杂,大家都试图将软件设计的越来越灵活,很多内容我们都希望是可配 ...

  7. 草根玩微博 中产玩微信 土豪玩什么?支持Yo的iWatch?

    <中国新媒体发展报告(2014)>发布了一些新媒体的使用情况数据,25.6%无收入群体人数在玩微博,32.0%的微信用户属于月收入3000~5000元的中产阶层,那么土豪会玩什么新媒体呢? ...

  8. java笔记--关于线程死锁

    关于线程死锁 什么是死锁: 在编写多线程的时候,必须要注意资源的使用问题,如果两个或多个线程分别拥有不同的资源, 而同时又需要对方释放资源才能继续运行时,就会发生死锁. 简单来说:死锁就是当一个或多个 ...

  9. js实现鼠标右键自定义菜单(弹出层),并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

    <table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...

  10. NSArray和NSMutableArray

    //1. NSArray EOItems *eOItems = [[EOItems alloc] init]; eOItems.ID = [NSNumber numberWithInt:]; NSAr ...