HTML标签自定义属性(转)

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");
时间: 2024-10-13 00:59:45

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

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

大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就像标准的标签那样写就可以了,而且CSS和JavaScript存取自定义标签和标准标签并无二致. 1 2 3 4 5 6 7 8 9 <foo id="idFoo" style="color:red" data-bar="bar">foo

HTML标签自定义属性

本文章转载至:http://www.cnblogs.com/luoyanli/archive/2012/10/17/2727886.html HTML标签可以自定义属性,但是我们要考虑其在IE.Firefox以及chrome下的兼容性问题.例如: <div id="newTest" myAttr="getAttr"></div> 复制代码 这里的“myAttr”就是这个标签的自定义属性了. 如果定义了属性却使用不了,那么这个属性就没有任何意义

JS标签自定义属性查看

对于原生JS标签里面的自定义属性,发现原本设想的ID.自定义属性——有兼性问题... <div id="div" self-type="all-type">123</div> <script> var Div = document.getElementById("div"); alert(Div.self-type) //在IE下无问题,可以弹出all-type,但是在谷歌与其他浏览器有兼容问题 alert(D

关于jQuery获取html标签自定义属性值或data值

//获取属性值<div id="id1" value="优秀" ></div>jQuery取值:$("#id1").attr("value"); //获取自定义属性值<div id="id1" value="123" data_obj="优秀" ></div>jQuery取值:$("#id1").at

html自定义属性

是不是经常因为标签不是input而无法储存.获取更多想要的值? 不要怕,html可以自定义属性,你想怎么用就怎么用. 例:在span标签自定义属性"val"(一般标签都可以自定义属性) <span class="oneionp" id="province" val="自定义属性值"> 我是span标签</span> 如何获取自定义属性值? var abc= $("#province"

js自定义属性以及自定义一组开关应用

任何的html标签都有自己的一个属性,当时那都是它本身的固定属性,而我们在项目中可能会遇到需要给标签添加一些自定义的属性,去判断替换内容或者赋值等等,那么就需要给标签设定一个属性来作为判断标准或者赋值的标准,所以今天就来谈谈给标签自定义属性的一个小应用. 案例:三个div有背景色,想要达到效果是点击任何一个给替换颜色再次点击,还给还原回来,各自的div不影响其他的div,也可以都点击都变色,相反都还原. 好的,话不多说,我们来看代码,先来看下简单的布局: 1 <style> 2 ul,li{l

DOM的一些常用事件

在设置DOM中我们经常会涉及到一个词叫做兼容性,所谓兼容性就是看浏览器是否支持当前对象的属性或方法,如果多个浏览器都支持,那就是兼容,如果有浏览器不支持那就是不兼容.所以在程序中,我们一般要做能力检测,即检测他兼容性怎么样. 在DOM中有一些常用的事件: 一些基本常用的事件列举了一些例子,通过例子能快速理解什么意思. onclick和ondblclick分别是鼠标单击和鼠标双击: onfocus和onblur分别表示的获得焦点和失去焦点: onmouseover和onmouseout是鼠标悬停和

angular 路由router的用法总结

1,html页面 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 

Jquery 取值相关

/* ("${feed.eleclean}"=="1") ? $("#cg1").hide() : $("#cg1").show(); ("${feed.elelight}"=="1") ? $("#cg2").hide() : $("#cg2").show(); ("${feed.opendoor}"=="1&quo