IE中增加直线和删除直线

最新推荐文章于 2021-06-03 04:39:21 发布

愚明

最新推荐文章于 2021-06-03 04:39:21 发布

阅读量417

点赞数

分类专栏： jsp

本文链接：https://blog.csdn.net/wangjin890620/article/details/24404153

版权

jsp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做的项目需要在jsp页面中动态生成流程图，对于连个div的连接线可能会生成和删除多次。经过尝试，终于实现了。

<html xmlns:v="urn:schemas-microsoft-com:vml"> 
<html>
<head>
<title>aaa</title>
</head>
<style type="text/css">
    v\:* {behavior:url(#default#VML);} 
    .newbtn{margin-right:10px;border:solid 1px green;cursor:pointer;padding:2px;background:#efd;}
    body,table
    {
        font-size: 12px;
    }
    
</style>
<body > 

<div style="text-align=left;">
 
      <input name="tes" type="button" value="DELLINE" οnclick="deleteLine();" />
     <input name="tes" type="button" value="ADDLINE" οnclick="aa(0,0,200,200);" />
  </div>
  
    <div id="WorkFlowSpan"  >
</div>
<script type="text/javascript">

var panel = document.getElementById("WorkFlowSpan");


//画线
 var R =function(){};
 R.prototype.createLine = function (startX,startY,endX,endY,color){ 
     var le = document.createElement( "<v:line name=\"lines\"></v:line>" ); 
     le.from = startX + ',' + startY ; 
     le.to = endX + ',' + endY ; 
     le.strokecolor= color ; 
     le.strokeweight= "1pt" ; 
    // alert(le);
     return le; 
 } 
 var d =new R();
 function aa(){
   panel.appendChild(d.createLine(190,225,260,125,"red"));
   panel.appendChild(d.createLine(190,225,260,385,"red"));
   panel.appendChild(d.createLine(410,135,470,75,"red"));
   panel.appendChild(d.createLine(410,135,470,175,"red"));
   panel.appendChild(d.createLine(410,385,470,385,"red"));
   
 }
 //删除线条
 function deleteLine(){
	 var id = document.getElementById("WorkFlowSpan");
	 var linka = id.getElementsByTagName("line");
	 for(i=linka.length-1;i>=0;i--){
		 id.removeChild(linka[i]);
	 }
		 
 }
 </script>

</body>
</html>