HTML5 data-*自定义属性简单介绍-低调大师

HTML5 data-*自定义属性简单介绍

2018-03-21 739

我们可以使用data-作为前缀来设置我们所需要的自定义数据属性。

使用此属性可以存放一些我们所需要的数据，代码如下:

1	`<` `a` `href` `=` `"javascript:"` `data-url` `=` `"softwhy.com"` `data-webname` `=` `"蚂蚁部落"` `>蚂蚁部落</` `a` `>`

上面代码中，以data-为前缀就是自定义数据属性，属性值就是存放的数据。

浏览器兼容:

（1）.IE8和IE8以上浏览器支持此属性。

（2）.谷歌浏览器支持此属性。

（3）.火狐浏览器支持此属性。

（4）.opera浏览器支持此属性。

（5）.safria浏览器支持此属性。

命名规则:

（1）.数据属性要以data-开头。

（2）.属性名中的字符都是小写，并且在前缀 "data-" 之后必须有至少一个字符。

（3）.属性值可以是任意字符串。

可以利用自定义属性进行css匹配和相关javascript操作。

使用自定义属性作为选择器代码如下:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

         <!doctype html>
        
         <
         html
         > 
        
         <
         head
         > 
        
         <
         meta 
         charset
         =
         "utf-8"
         > 
        
         <
         meta 
         name
         =
         "author" 
         content
         =
         "http://www.softwhy.com/" 
         /> 
        
         <
         title
         >蚂蚁部落</
         title
         > 
        
         <
         style 
         type
         =
         "text/css"
         > 
        
         a {
        
         display:block; 
        
         width:100px; 
        
         height:50px; 
        
         margin:10px; 
        
         text-align:center; 
        
         line-height:50px; 
        
         background:#ccc; 
        
         }
        
         a[data-webname="蚂蚁部落"] {
        
         color:red; 
        
         }
        
         </
         style
         > 
        
         </
         head
         > 
        
         <
         body
         > 
        
         <
         a 
         href
         =
         "javascript:" 
         data-webname
         =
         "蚂蚁部落"
         >蚂蚁部落</
         a
         > 
        
         <
         a 
         href
         =
         "javascript:" 
         data-webname
         =
         "antzone"
         >softwhy.com</
         a
         > 
        
         </
         body
         > 
        
         </
         html
         >

上面的代码就可以利用自定义属性进行匹配，设置元素的样式。

原文发布时间为：2017-3-2

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：HTML5 data-*自定义属性简单介绍

微信关注我们

原文链接：https://yq.aliyun.com/articles/561665

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

hbase_异常_03_java.io.EOFException: Premature EOF: no length prefix avai...

一、异常现象更改了hadoop的配置文件：core-site.xml 和 mapred-site.xml 之后，重启hadoop 和 hbase 之后，发现hbase日志中抛出了如下异常： 2018-03-22 15:56:09,948 WARN [ResponseProcessor for block BP-792111345-192.168.1.102-1521639243869:blk_1073741858_1034] hdfs.DFSClient: DFSOutputStream ResponseProcessor exception for block BP-792111345-192.168.1.102-1521639243869:blk_1073741858_1034 java.io.EOFException: Premature EOF: no length prefix available at org.apache.hadoop.hdfs.protocolPB.PBHelper.vintPrefixed(PBHelper.java:2294) at org.apa...

2018-03-21

980

一、异常现象启动hbase的时，hbase的日志中可以发现： Waiting for dfs to exit safe mode... 然后就抛异常了 2018-03-22 17:00:28,994 INFO [rayner:46905.activeMasterManager] util.FSUtils: Waiting for dfs to exit safe mode... 2018-03-22 17:00:39,000 INFO [rayner:46905.activeMasterManager] util.FSUtils: Waiting for dfs to exit safe mode... 2018-03-22 17:00:49,005 INFO [rayner:46905.activeMasterManager] util.FSUtils: Waiting for dfs to exit safe mode... 2018-03-22 17:00:59,007 INFO [rayner:46905.activeMasterManager] util.FSUtils: ...

2018-03-21

703

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。