您的位置:首页 > Web前端 > JavaScript

js动态生成DIV(根据鼠标点击处生成DIV,兼容浏览器)

2014-07-29 14:02 856 查看
js动态生成DIV(根据鼠标点击处生成DIV,兼容浏览器)var mouseX;//记录鼠标点击位置。
var mouseY;//记录鼠标点击位置。
/**
*获取鼠标点击坐标
*/
document.onmousedown=function(ev){
var ev = ev||event;
if(ev.pageX || ev.pageY){
mouseX = ev.pageX+'px';
mouseY = ev.pageY+'px';
}else{//兼容ie
mouseX = ev.clientX+document.body.scrollLeft - document.body.clientLeft+'px';
mouseY = ev.clientY+document.documentElement.scrollTop+'px';
}
}
**
*创建DIV
*/
function addChild(){
var my = document.createElement("ChildDiv"); //创建一个div
document.body.appendChild(my); //添加到页面
my.style.position="absolute"; //通过样式指定该div的位置方式,
my.style.top= mouseY; //通过样式指定y坐标
my.style.left= mouseX; //通过样式指定x坐标
my.style.border='1px solid #FF0000'; // 设置边框
my.style.width='500px';
my.style.height='70px';//通过样式指定宽度、高度
//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc"; //设置样式透明
var alpha = 80;
my.style.filter='alpha(opacity:'+alpha+')';//IE
my.style.opacity=alpha/100;//IE之外其他浏览器
my.id = "ChildDiv";//设置ID
}
删除JS生成的DIV
function delete(){
if( (cdiv=document.getElementById('OrderChildDiv'))!=null){
p = cdiv.parentNode;
p.removeChild(cdiv);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐