IT技术互动交流平台

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

作者:openwares.net  发布日期:2013-06-18 20:16:38

大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当。

自定义HTML标签

在firefox、chrome这种现代浏览器里,自定义标签很简单,就像标准的标签那样写就可以了,而且CSS和JavaScript存取自定义标签和标准标签并无二致。


<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-属性在页面上是不显示的,不会影响页面布局和风格,但它却是可读可写的。www.it165.net

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

 

<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。

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

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

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


Tag标签: 标签  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规