大部分浏览器支持自定义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 tag!</foo>
<script>
    (function(){
        console.log($("foo").text()); //foo tag!
        console.log($("foo").data("bar")); //bar
        console.log(document.getElementById("idFoo").innerHTML); //foo tag!
        console.log(document.getElementById("idFoo").getAttribute("data-bar")); //bar
    })();
</script>

firefox 21,chrome 27,IE 10表现都十分正常。IE9没有测试,据说也没问题

不过据说在IE8及之前,自定义标签没那么简单,可以通过添加命名空间或者是document.createElement(“自定义标签名称”)来进行自定义HTML标签,不过如果你想在自定义的标签上使用CSS选择器,则必须使用document.createElement(“自定义标签名称”),不管有没有定义过XML命名空间。参见这里

还有人报告一个IE8自定义标签的问题,”事先已document.createElement(‘thetag’),但后续通过innerHTML的方式添加的该元素,IE8是不认的,createElement + appendChild 则可以“。

新的项目已经决定只支持Firefox,Chrome,IE9+版本,IE6,7,8之类的随它去吧。

标签自定义属性

自定义标签属性经常会用到,但是一直是没有规范来约束如何自定义标签属性,导致一些混乱和移植性问题。现在HTML5增加了一个自定义data属性的特性。

很简单,只要自定义属性以data-开头,后面至少跟随一个字符即可,但是不能包含字符U+0041到U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z)。每个元素可包含多个自定义属性。

这些data-属性在页面上是不显示的,不会影响页面布局和风格,但它却是可读可写的。

jQuery已经支持通过data方法来读取自定义的data-属性,而且支持json格式的属性值,很方便。

1
2
3
4
5
6
7
8
9
10
11
<foo id="idFoo" style="color:red" data-bar="bar" data-obj='{"key1":"value1"}' >foo tag!</foo>
<script>
    (function(){
        console.log($("foo").text()); //foo tag!
        console.log($("foo").data("bar")); //bar
        console.log($("foo").data("obj").key1); //value1
        console.log(document.getElementById("idFoo").innerHTML); //foo tag!
        console.log(document.getElementById("idFoo").innerText); //foo tag!注:firefox 21不支持
        console.log(document.getElementById("idFoo").getAttribute("data-bar")); //bar
    })();
</script>

上面的代码中,在自定义属性中使用json数据需要注意,一定要在外层使用单引号’,内层使用双引号”,如果反过来,firefox和chrome都会报undefined。

自定义标签的innerText属性,firefox 21不支持,输出”undefined”,chrome 27和IE 10输出正常。

也可以通过data(key,value)方式为自定义data属性赋值。

自定义data属性代码在friefox 21,chrome 27,IE 10测试通过。

UPDATE(05/21/2014):
The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

data-特性(attributes)只在第一次读取时获取其值,并且将其缓存到jQuery内部,之后不再读取或改变data-特性。也就是说第一次读取之后,如果通过.attr()方法修改了特性的值,然后再通过data方法读取时仍然是原来的值。

References:
[1]HTML 5 的data-× 自定义属性和 jQuery的data()方法

HTML自定义标签与标签自定义属性的更多相关文章

  1. Android自定义控件之自定义ViewGroup实现标签云

    前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...

  2. jsp如何自定义tag的标签库?

    虽然和上一次的使用自定义的tld标签简化jsp的繁琐操作的有点不同,但是目的也是一致的.自定义tag比较简单. 1.新建tag标签 在WEB-INF目录下新建一个tags的文件夹,是自定义tag标签的 ...

  3. 12 自定义标签/JSTL标签库/web国际化/java web之设计模式和案例

    EL应用      自定义一个标签,实现两个字符串的相加 1回顾      1.1servlet生命周期           init(ServletConfig)           service ...

  4. JavaEE自定义标签:标签类的创建、tld配置文件的创建(位置、如何创建)、Web-XML配置、JSP应用

    1.标签 以类似于html标签的方式实现的java代码的封装. 第一:形成了开发标签的技术标准---自定义标签的技术标准. 第二:java标准标签库(sun之前自己开发的一系列的标签的集合)jstl, ...

  5. JSP自定义标签——简单标签(2)

    在前一篇博客中,我们已经学习了自定义的简单标签的基本使用方法,这一篇我们来学习如何在简单标签中添加标签属性.对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对 ...

  6. JSP自定义标签——简单标签(1)

    前面一篇博客介绍了自定义标签的传统标签使用方式,但是我们会发现,使用传统标签非常的麻烦,而且接口还多,现在传统标签基本都没用了,除了一些比较久的框架.Sun公司之后推出了一个新的标签使用方式,称之为简 ...

  7. JSP自定义标签——传统标签

    同JSP标签一样,自定义标签主要用于移除JSP页面中的Java代码,可以看到我们在JSP中其实是禁止使用Java脚本的,任何要想通过Java代码实现的功能都必须以标签形式来处理,可以使用JSP标签,J ...

  8. python的Web框架,Django自定义过滤器及标签

    代码布局 有的时候框架给的过滤器不够用,需要自定义一些过滤器,所以就需要我们自己来定义一些过滤器等 自定义代码放置的路径 某个app特用(独有)的 - app 目录下的 templatetags文件夹 ...

  9. golang自定义struct字段标签

    原文链接: https://sosedoff.com/2016/07/16/golang-struct-tags.html struct是golang中最常使用的变量类型之一,几乎每个地方都有使用,从 ...

  10. 一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器(了解)

    一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量ke ...

随机推荐

  1. VMware中安装Contos

    1 检查BIOS虚拟化支持 2 新建虚拟机 3 新建虚拟机向导 4 创建虚拟空白光盘 5 安装Linux系统对应的CentOS版 6 虚拟机命名和定位磁盘位置 7 处理器配置,看自己是否是双核.多核 ...

  2. [学习笔记]CDQ分治和整体二分

    序言 \(CDQ\) 分治和整体二分都是基于分治的思想,把复杂的问题拆分成许多可以简单求的解子问题.但是这两种算法必须离线处理,不能解决一些强制在线的题目.不过如果题目允许离线的话,这两种算法能把在线 ...

  3. Vue + Bootstrap 制作炫酷个人简历(一)

    最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...

  4. .gitignore总结

    git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源.最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:

  5. Python小白学习之路(二十五)—【装饰器的应用】

    通过一个任务来加深对装饰器的理解和应用 回顾:装饰器的框架 def timmer(func): def wrapper(): func() return wrapper 任务:给以下正在运行的程序加一 ...

  6. canvars 画花

    index.html <!DOCTYPE html><html><head> <title>旋转的花</title> <meta ch ...

  7. 10分钟打造强大的gvim

    感谢Ruchee的共享精神,让我等vim新手省去了配置vim的麻烦(教程地址:配置文件使用指南). 只需要简单的6个步骤,就可以配置完成一个强大的gvim神器,下图是我的最终配置效果图. (另外,我的 ...

  8. hao643.com劫持(修改快捷方式跳转至hao123.com)

    >症状:所有浏览器快捷方式,都被加上尾巴,例如IE的:"C:\Program Files\Internet Explorer\iexplore.exe" http://hao ...

  9. Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题

    自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动. yarn add ele ...

  10. spring boot实现ssm(2)功能

    spring 和 mybatis 整合的那篇: ssm(2) . 配置文件比ssm(1) 更多, 在做项目的时候, 配置文件是一个让人头大的事情. 那么在spring boot中, 实现相同功能, 需 ...