<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsDrawPoint.aspx.cs" Inherits="JS1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="drawing.js"></script>
<style>
div
{
width:500px;
height:500px;
border-color:#FF0000;
border-width:0.5em;
background-color:#CCCCCC
}
pt
{
background:#CC3300;
border-top:6px solid #FFFFCC;
border-left:6px solid #FF3300;
border-bottom:6px solid #FFFFCC;
overflow:hidden; float:left;
}
img
{
background-image: url(file:///C|/Inetpub/wwwroot/aspnet_client/ESRI/WebADF/images/edClear-selected-feature-ON.gif);
}
</style>
方法一：直接用div添加
<script language="javascript" type="text/javascript">
function drawPt()
{
var x=event.offsetX+'px';
var y=event.offsetY+'px';
var div = drawDot(x,y,"red",5);
document.body.innerHTML += div;
}
function drawDot(x,y,color,size)
{
//新建一个div
var div = "<div style='position:absolute; border:0;left:"+(x) +"; top:"+(y)+
";background-color:"+color+";"+size+";height:"+size+";'"+"onclick='alert();'"+"></div>";
return div;
}
</script>
方法二：
<script language="javascript" type="text/javascript">
function drawPt()
{
var x=event.offsetX+'px';
var y=event.offsetY+'px';
//新建一个页面元素，并赋属性
var pt=document.createElement("img");
pt.style.position="absolute";
pt.style.left=x;
pt.style.background="green";
pt.style.top=y;
pt.style.zIndex=10;
pt.setAttribute("align","center");
//添加单击事件
pt.onclick = function(){alert(1)};
pt.setAttribute("id","pt");
document.body.appendChild(pt);
}
</head>
<body>
<form id="form1" runat="server">
<div id='div' onmousedown="drawPt();">
</div>
</form>
</body>
</html>