JS-点击效果

点击鼠标,让div出现在,鼠标点击的位置上
实现方式:
点击时,获取鼠标点击位置的坐标,是针对视窗窗口的坐标
将这个数值,作为标签定位的数据

var oDiv = document.querySelector('div');

如果没有,padding和border,只要获取宽度就可以
有px单位,parseInt() 只获取数值,不要px
实际项目中,还需要定义兼容性
var oDivHeight1 = parseInt(window.getComputedStyle(oDiv).height) ;

如果要是有,padding和border,需要使用 offsetHeight 来获取
只有数值,没有px单位
推荐使用
var oDivHeight2 = oDiv.offsetHeight;

console.log(oDivHeight1 , oDivHeight2);

var oDivWidth = oDiv.offsetWidth;

window.onclick = function(e){
    // console.log(e);
    // 这个数值只有 数, 没有px单位
    // 作为定位的属性值,需要拼接px单位

    // 让标签的左上角和鼠标点击的位置重合
    // oDiv.style.left = e.clientX + 'px' ;
    // oDiv.style.top = e.clientY + 'px' ;

    // 让标签的左上角 和 鼠标点击位置 有间距
    // 在原始数值的基础上,再多加上一定的数值
    // 这个数值,是根据客户需求而定,现在随便加个数,意思意思
    // oDiv.style.left = e.clientX + 20 + 'px' ;
    // oDiv.style.top = e.clientY + 20 + 'px' ;

    // 让标签的中心 和 鼠标点击位置 重合
    // 在原始数值的基础上,再减去定位标签,宽高的一半
    oDiv.style.left = e.clientX - oDiv.offsetWidth/2  + 'px' ;
    oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
}