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 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()方法

时间: 2024-11-07 17:08:40

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

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

EL应用 自定义一个标签,实现两个字符串的相加 1回顾 1.1servlet生命周期 init(ServletConfig) service(ServletRequest,ServletResponse) destory() 1.2回话技术 cookie:浏览器端 (服务器需要浏览器保存少量的数据) 服务器创建对象:new Cookie(name,value) cookie.setMaxage(秒);  有效时间 cookie.setMaxage(0)  删除cookie cookie.setP

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

虽然和上一次的使用自定义的tld标签简化jsp的繁琐操作的有点不同,但是目的也是一致的.自定义tag比较简单. 1.新建tag标签 在WEB-INF目录下新建一个tags的文件夹,是自定义tag标签的位置. 2.编辑标签 <%@ tag import="org.apache.shiro.util.StringUtils"%> <%@ tag import="org.apache.shiro.SecurityUtils" %> <%@ t

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

同JSP标签一样,自定义标签主要用于移除JSP页面中的Java代码,可以看到我们在JSP中其实是禁止使用Java脚本的,任何要想通过Java代码实现的功能都必须以标签形式来处理,可以使用JSP标签,JSTL标签,EL函数,或者自定义标签. 自定义标签分为传统标签和简单标签,简单标签是Sun公司为减低自定义标签技术的学习难度而定义的,对于简单标签请看下一篇博客.本文先来学习传统自定义标签. 使用传统自定义标签需要满足以下两个步骤: ① 编写一个实现Tag接口(实际上我们更常的是继承Tag接口的实现

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

在前一篇博客中,我们已经学习了自定义的简单标签的基本使用方法,这一篇我们来学习如何在简单标签中添加标签属性.对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对标签体内容执行一定的次数,就无法在标签上规定要执行的次数,必须在标签处理器类中修改,很不方便,如果使用带属性的标签就能很好的解决这个问题. 要想使简单标签具有属性,通常需要满足以下两个步骤: ① 在标签处理器类中定义属性,同时为每个属性生成setter方法: ② 在TLD文件中对于的<tag>标签

[原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)

本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 ---------------------------------

javaEE(6)_自定义标签&amp;JSTL标签(JSP Standard Tag Library)

一.自定义标签简介 1.自定义标签主要用于移除Jsp页面中的java代码,jsp禁止出现一行java脚本. 2.使用自定义标签移除jsp页面中的java代码,只需要完成以下两个步骤: •编写一个实现Tag接口的Java类(标签处理器类). •编写标签库描述符(tld)文件,在tld文件中对标签处理器类进行描述. 3.快速入门:使用标签输出客户机IP //java类 public class ViewPortTag extends TagSupport{ @Override public int

基于SSM3框架FreeMarker自定义指令(标签)实现

通过之前的Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解系列文章,我们已经成功的整合到了一起,这次大象将在此基础上对框架中的FreeMarker模板做一个扩展,详细说明如何实现自定义指令(标签)功能.    我们在开发的时候,往往对一些数据字典形式的数据,想将它封装成通用的模块以便于使用,如果使用JSP做展示层,可以创建自定义标签来实现,现在换成FreeMarker视图,我们一样可以达到想要的目的.    实现FreeMarker指令其实很简单

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

1.标签 以类似于html标签的方式实现的java代码的封装. 第一:形成了开发标签的技术标准---自定义标签的技术标准. 第二:java标准标签库(sun之前自己开发的一系列的标签的集合)jstl,以及表达式语言EL. 2.自定义标签 (1)理解: 可以允许用户自己根据自己的需要,去开发自己的标签的技术规范. 通俗:在Jsp页面上,以简单的标签封装java代码的操作. //在自定义标签类中,先调用setPageContext()实例化内置对象: //然后是doStartTag()方法,核心代码

黑马day07 自定义标签&amp;简单标签

自定义标签的步骤: 1.写一个类实现SimpleTag接口或者继承SimpleTagSupport 2.写一个tld文件,描述写好的类 3.在jsp页面引入tld文件,就可以在jsp页面中使用自定义标签 执行原理: 当jsp在执行的过程中,每当遇到一个简单标签时都会创建一个处理类对象. 调用setJspContext传入当前jsp页面的PageContext对象. 如果当前标签有父标签则调用setParent方法将父标签传入,如果没有父标签则这个方法不会被调用. 如果该标签具有属性,调用属性的s

工作总结 Rezor 里面的一些小知识----自定义类型 放在标签值中 会直接跳过去

0 的时候不报错 1 的时候 报错了 原因 是 imagesname[i]  索引超出了 为什么在 上面 报错呢?  不在这里报错呢? 说明了  Rezor 对于 自定义的变量 放在标签值里的时候,调试时是直接跳过的  本来是不满足条件 不跳过此次 继续走的  但Rezor对于这种自定义变量放在标签值里 调试是跳过的 所有 一经过 if 就报错了 总结 放在标签值里的Rezor 自定义变量 调试不会走进去的 强类型也一样 放在标签值中的 都不执行 例如<input type="text&q