如何在html中自定义标签

来源：互联网发布：年会主题知乎编辑：程序博客网时间：2024/05/29 12:25

最近突发奇想,想在html里面自定义标签,看看行不行,这样就可以自定义控件了.

看以下代码:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
</head>
<body>
  <sx color="red" onsuccess="alert(1)"></sx>
  <script>
   var a=document.getElementsByTagName("*");
   for(var i=0;i<a.length;i++){
    if(a[i].tagName=="SX"){
     var d=document.createElement("div");

     d.style.width="100px";
     d.style.height="100px";
     d.style.backgroundColor=a[i].color;
     d.onclick=function(r){
      return function(){
      eval(r);

      }
     }(a[i].onsuccess)

     a[i].parentNode.replaceChild(d,a[i]);

    }
   }
  </script>
</body>
</html>

我一开始是 d.onclick这里用a[i]做参数进行传递的,发现不行,调试下发现,click里的函数是一个闭包,当我们click时,sx这个标签已经被替换成div,里面属性都改了,当然会出错,所以用

a[i].onsuccess作为字符串传递,就不会遇到问题了.

感觉是个好方法,可以自己加东西了,我没学过asp.net,不知道是不是有点异曲同工呢.

希望大家和我多多交流