JS点击图片位置后增加点位

 相关CSS

.img {
	position: relative;
	border: 0.1px solid #000;
	display: inline-block;
	margin: 100px 100px
}

.img .marker {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #f00;
}

相关HTML

       <div id="dvs" style="width: 1477px; height: 550px; display: none;">
    <div class="img" id="dv" style="margin-bottom: 0px; margin: 15px">
图片：<img id="imgs" style="width: 1438px; height: 70px" src="img.jpg"></div>
    <div class="col-md-12">
        <table class="table table-striped table-bordered table-hover"
		id="subprocessTable"></table>
		</div>
	</div>

相关js

var ProportionHeightInImg; //鼠标所选位置相对于所选图片高度的比例
		var ProportionWidthInImg;//鼠标所选位置相对于所选图片宽度的比例
		function createMarker(x, y, divName) {
			var div = document.createElement('div');
			div.className = 'marker';
			div.style.left = x + 'px';
			div.style.top = y + 'px';
			document.getElementById(divName).appendChild(div)
		}

		document.getElementById('dv').onclick = function(e) {
			e = e || window.event;
			var x = e.offsetX || e.layerX, y = e.offsetY || e.layerY;
			createMarker(x, y, 'dv');
			console.log(x, y, '11111111')
			addpoint(x, y)
			//获取图片的高度和宽度
			var myImg = document.querySelector("#imgs");
			var currWidth = myImg.clientWidth;
			var currHeight = myImg.clientHeight;
			console.log("图片高度：" + currHeight);
			console.log("图片宽度：" + currWidth);
			ProportionWidthInImg = x / currWidth;
			ProportionHeightInImg = y / currHeight;
			console.log("图片比例高度：" + ProportionHeightInImg);
			console.log("图片比例宽度：" + ProportionWidthInImg);

		}