给标签自定义属性html

H5为我们提供了一个data属性——“data-”前缀,可以让所有的HTML元素支持自定义属性,只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>  

这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>  
#myDiv{  
  position: ralative;  
}  
  
#myDiv:hover:after{  
  position: absolute;  
  top: 0px;  
  left: 0px;  
  content: attr(data-attribute);  
  color: red;  
}  

不用h5

<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>  

获取里面的值是使用getAttribute来获取自定义属性里面的值:

var myDiv = document.getElementById("myDiv");    
var theValue = myDiv.getAttribute("user-defined-attribute");  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容