美文网首页
给标签自定义属性html

给标签自定义属性html

作者: 新篇章 | 来源:发表于2018-03-25 16:19 被阅读0次

    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");  
    

    相关文章

      网友评论

          本文标题:给标签自定义属性html

          本文链接:https://www.haomeiwen.com/subject/qvzhcftx.html