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()方法
HTML自定义标签与标签自定义属性的更多相关文章
- Android自定义控件之自定义ViewGroup实现标签云
前言: 前面几篇讲了自定义控件绘制原理Android自定义控件之基本原理(一),自定义属性Android自定义控件之自定义属性(二),自定义组合控件Android自定义控件之自定义组合控件(三),常言 ...
- jsp如何自定义tag的标签库?
虽然和上一次的使用自定义的tld标签简化jsp的繁琐操作的有点不同,但是目的也是一致的.自定义tag比较简单. 1.新建tag标签 在WEB-INF目录下新建一个tags的文件夹,是自定义tag标签的 ...
- 12 自定义标签/JSTL标签库/web国际化/java web之设计模式和案例
EL应用 自定义一个标签,实现两个字符串的相加 1回顾 1.1servlet生命周期 init(ServletConfig) service ...
- JavaEE自定义标签:标签类的创建、tld配置文件的创建(位置、如何创建)、Web-XML配置、JSP应用
1.标签 以类似于html标签的方式实现的java代码的封装. 第一:形成了开发标签的技术标准---自定义标签的技术标准. 第二:java标准标签库(sun之前自己开发的一系列的标签的集合)jstl, ...
- JSP自定义标签——简单标签(2)
在前一篇博客中,我们已经学习了自定义的简单标签的基本使用方法,这一篇我们来学习如何在简单标签中添加标签属性.对自定义标签添加一些属性,可以使我们的标签功能更加灵活和复用.例如前一篇博客使用简单标签来对 ...
- JSP自定义标签——简单标签(1)
前面一篇博客介绍了自定义标签的传统标签使用方式,但是我们会发现,使用传统标签非常的麻烦,而且接口还多,现在传统标签基本都没用了,除了一些比较久的框架.Sun公司之后推出了一个新的标签使用方式,称之为简 ...
- JSP自定义标签——传统标签
同JSP标签一样,自定义标签主要用于移除JSP页面中的Java代码,可以看到我们在JSP中其实是禁止使用Java脚本的,任何要想通过Java代码实现的功能都必须以标签形式来处理,可以使用JSP标签,J ...
- python的Web框架,Django自定义过滤器及标签
代码布局 有的时候框架给的过滤器不够用,需要自定义一些过滤器,所以就需要我们自己来定义一些过滤器等 自定义代码放置的路径 某个app特用(独有)的 - app 目录下的 templatetags文件夹 ...
- golang自定义struct字段标签
原文链接: https://sosedoff.com/2016/07/16/golang-struct-tags.html struct是golang中最常使用的变量类型之一,几乎每个地方都有使用,从 ...
- 一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器(了解)
一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量ke ...
随机推荐
- python常用代码片段
目录 Python3常用 文件处理 json处理 log日志 argparse使用 INIparser Python3常用 文件处理 class BaseMethod: @staticmethod d ...
- 【文文殿下】WC2019游记
Day0 今天早上三点半才睡着,五点起床,前往省城郑州.与省实验常老师汇合,坐上高铁,下午三点半多才到广州二中. 下午随便找了一个教室进去敲一敲代码,发现自己越来越菜了. 和一大堆网上的dalao面基 ...
- nsurlsessiond - taking up all bandwidth!! Help ?
https://discussions.apple.com/thread/6605949?start=0&tstart=0 #!/bin/sh launchctl unload /System ...
- 试着用java实现DNS(一)——DatagramSocket, DatagramPacket, Message
一般来说,自己编写DNS是没有必要的,目前开源的dns服务软件很多,功能也很强大.但是,有时候又是很有必要的,有着诸多好处.比如说,用于企业内网,简化DNS配置,可以根据企业需求添加新的功能,非常灵活 ...
- python收集jvm数据
之前前辈用 java 写的收集 jvm 脚本, 不太方便组内小伙伴维护, 遂用 python 重写了 #!/usr/bin/env python # -*- coding: utf-8 -*- # F ...
- [JavaScript] 的异步编程之手写一个Gernerator的例子
<html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...
- spring-boot集成thymeleaf。
thymeleaf是前台页面展示,原来一直是jsp,jsp中包含很多服务器端的逻辑,逐渐淘汰.同样功能的还有freemarker.孰好孰坏不予评价,只做简单实现. 1.基本思路 (1)pom.xml中 ...
- 使用IST重新加入节点(5.7.20)
IST不是SST用于节点重新加入吗?我们有解决方案! 鉴于上述痛点,我们将介绍 gcache.freeze_purge_at_seqno Percona XtraDB Cluster 5.7.20.这 ...
- Deep Learning (中文版&英文版)
Bengio Yoshua,Ian J. Goodfellow 和 Aaron Courville共同撰写的<深度学习>(Deep Learning)是一本为了帮助学生及从业者入门机器学习 ...
- [Python 从入门到放弃] 2. 列表的其它操作
1. 列表可以混合不同类型的数据项 movies=['<黄飞鸿之英雄有梦>','<寒战2>','<乘风破浪>'] 在这句代码中,数据项为电影名称,现在这个列表用来保 ...