js操作div js操作div常用-范文大全-就爱阅读网
js操作div常用
/********************* 取窗口滚动条高度 ******************/function getScrollTop(){var scrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollT}else if(document.body){scrollTop=document.body.scrollT}return scrollT}/********************* 取窗口可视范围的高度 *******************/function getClientHeight(){var clientHeight=0;if(document.body.clientHeight&&document.documentElement.clientHeight){var clientHeight = (document.body.clientHeight&document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientH }else{var clientHeight = (document.body.clientHeight&document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientH }return clientH}/********************* 取文档内容实际高度 *******************/function getScrollHeight(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);}////////////////////////////////////////////////////在IE中：document.body.clientWidth ==& BODY对象宽度document.body.clientHeight ==& BODY对象高度document.documentElement.clientWidth ==& 可见区域宽度document.documentElement.clientHeight ==& 可见区域高度在FireFox中：document.body.clientWidth ==& BODY对象宽度document.body.clientHeight ==& BODY对象高度document.documentElement.clientWidth ==& 可见区域宽度document.documentElement.clientHeight ==& 可见区域高度?在Opera中： document.body.clientWidth ==& 可见区域宽度document.body.clientHeight ==& 可见区域高度document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高）而如果没有定义W3C的标准，则IE为：document.documentElement.clientWidth ==& 0document.documentElement.clientHeight ==& 0FireFox为：document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高）Opera为：document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高）真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。//////////////////////////////////////////////////////////////////////////////////////网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth(包括边线的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth IE与火狐(firefox)浏览器对js及css支持的几处不同:1.firefox不能对innerText支持，也不知道为什么。firefox支持innerHTML但却不支持innerText，所以上网查了一下，原来它改支持textContent来实现innerText，不过实现得没有那么好，默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替2.禁止选取网页内容：在IE中一般用js：obj.onselectstart=function(){}而firefox用CSS:-moz-user-select:none3.滤镜的支持(例：透明滤镜)：IE:filter：alpha(opacity=10);firefox：-moz-opacity:.10;4.捕获事件：IE：obj.setCapture() 、obj.releaseCapture()Firefox： document.addEventListener("mousemove",mousemovefunction,true);　　　　document.removeEventListener("mousemove",mousemovefunction,true);5.获取鼠标位置：IE:event.clientX、event.clientYfirefox：需要事件函数传递事件对象　　　　obj.onmousemove=function(ev){　　　　 X= ev.pageX;Y=ev.pageY;　　　　}6.DIV等元素的边界问题：比如：设置一个div的CSS:：{width:100height:100border:#}IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；所以在做这个兼容IE和firefox的拖动窗口时，在js和css的写法上要动点脑筋，给大家两个小技巧一.判断浏览器类型：var isIE=document.all? true:我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false二.在不同浏览器下的CSS处理：一般可以用!important来优先使用css语句（仅firefox支持）比如：{border-width:0px!border-width:1}在firefox下这个元素是没有边框的，在IE下边框宽度是1px又发现几处XHTML与正常状态下的JS、CSS的区别前阶段写了兼容IE/Firefox的拖动窗口发现了这两个浏览器的几处区别：发现几处IE与firefox的js和css几处不同点【原】今天又写了兼容XHTML的版本，因为现在不是流行web标准嘛，偶不能落后啊！再说现在ASP.NET中的所有页面都是应用XHTML标准的，如果在布局页面中删了这句标准代码，里面的布局和控件visual studio就不显示了。呵呵，在网页开头加了这个代码就是所谓的XHTML标准了&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&改了一下JS和CSS，调试了N次，发现了XHTML标准下的几个不同点：1.document.documentElement 与 document.body代码中设置页面的CSS时一定要用：document.documentElement 比如：document.documentElement.style.overflow='hidden';overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的；2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement 即这四个属性（clientWidth、clientHeight、scrollLeft、scrollTop）一定要用document.documentElement 但是document.body.appendChild()和document.body.removeChild()却是可以用的，而且用document.documentElement.appendChild()和document.documentElement.removeChild()代替却会报错；**********所以我总结了一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement3.呵呵，加了这个标准以后IE的边框问题也出现了变化，现在和firefox趋于一致了，是不是这个就是XHTML的优点——跨浏览器的标准上篇文章提到：设置一个div的CSS:：{width:100height:100border:#}IE中（正常情况）：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；firefox（正常情况）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；加了XHTML标准后的（IE和firefox打和了，^_^）：IE中（XHTML）：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；firefox（XHTML）：：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；function domXMl() {//判断浏览器的兼容性var type=1; //默认为IE浏览器var data = new Array(); //存储实体的数组 if(navigator.userAgent.indexOf("MSIE")&0) {dom = new ActiveXObject("Microsoft.XMLDOM"); //实例化dom对象dom.async = dom.load("data/AsAUQ.xml");//加载xml文件//window.alert('IE');} else if(isFirefox=navigator.userAgent.indexOf("Firefox") & 0){type=2;//火狐不支持ActiveXObjectdom = document.implementation.createDocument("", "", null); dom.async =dom.load("data/AsAUQ.xml");}else{window.alert('暂不识别该浏览器!');}//开始解析xml文件if(dom) {//子元素//alert('d');//IE下和firefox下得到根节点的代码有差异if(type == 1){var items = dom.documentElement.childN} else if(type == 2){//或者不判断type 直接用底下这句也可以支持IE firefoxvar items = dom.getElementsByTagName_r("item"); } var oTbody = document.getElementByIdx_x('tbl');//遍历子元素for(var i=0;i&items.i++){var item = items[i];var atts = item.for(var j=0;j&atts.j++){//使数据显示在输入框里面，可编辑document.getElementByIdx_x(atts[j].name).value = atts[j]. } }}}&/script&纯js操作div移动2009 - 01 - 09 　作者： 　来源： 　浏览：566 　评论： 条 发布评论 问高手推荐：启网 - 专业的主机、服务器合租提供商　17hz.net - 5年服务器合租精品服务 &html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312"&&title&Div拖动/调整大小实例&/title&&/head&&script type="text/javascript"&//保留的位置var saveLeft,saveTop,saveWidth,saveHvar theBvar eventT //事件种类, "move"、"resize"//创建并设定div的参数function setDiv(){//防止重复打开if (div){}var newLeft,newTop,newWidth,newHtheBody = document.div = document.createElement("div");div.id = "panelDiv";div.style.position = "absolute";div.style.backgroundColor = "#E5E5E5"div.style.padding = "2px 5px 5px 2px";div.style.overflow = "hidden";div.style.zIndex = 1;//设定打开的大小和位置Function(){var openType = document.getElementById("radio1").checked ? 0 : 1;if (openType == 0) //默认大小默认位置居中打开{newWidth = "300px";newHeight = "300px";newLeft = (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";newTop = (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";}else //存储的位置与大小{newWidth = saveWidth ? saveWidth : "300px";newHeight = saveHeight ? saveHeight : "300px";newLeft = saveLeft ? saveLeft : (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";newTop = saveTop ? saveTop : (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";}div.style.width = newWdiv.style.height = newHdiv.style.left = newLdiv.style.top = newT}div = setChild(div);theBody.appendChild(div);var ipt = document.getElementsByTagName("input");for(var i = 0; i & ipt. i++){ipt[i].disabled =}}function setChild(div){//可否移动、调整var isMove = document.getElementById("isMove").var isResize = document.getElementById("isResize").//底色var cDiv = document.createEvar backDiv = cDiv("div");backDiv.style.cssText = "left: 0 top: 0 width: 100%; height: 100%; background-color: #F5F5F5;";div.appendChild(backDiv);//标题var topDiv = cDiv("div");topDiv.style.cssText = "left: 2 top: 2 width: 100%; height: 30 position: background-color: #78ABFF; vertical-align: z-index: 5";if (isMove){topDiv.style.cursor = "move";topDiv.setAttribute("onmousedown", function(){setMove(this)});}else{topDiv.style.cursor = "default";}topDiv.innerHTML = "&span style='top: 5 left:5 font-size: 20 font-weight: color: #102548; position:' onselectstart='return false'&标题栏&/span&";div.appendChild(topDiv);//关闭按钮var closeDiv = cDiv("div");closeDiv.style.cssText = "right: 8 top : 5 width: 24 height: 24 position: background-color: #E4EEFF; border: #2D66C4 1 text-align: vertical-align: cursor: z-index: 10";closeDiv.setAttribute("onclick", function() {eCloseDiv()});closeDiv.innerHTML = "&span style='font-size: 20 font-weight: color: #0E377A;' title='Esc快捷键'&×&/span&";div.appendChild(closeDiv);//内容var contentDiv = cDiv("div");contentDiv.style.cssText = "left: 2 top: 35 width: 100%; position: overflow: auto";contentDiv.style.height = (parseInt(div.style.height) - 40) + "px";contentDiv.innerHTML = "&table style='width: 100%; height: 100%; text-align: vertical-align: hidden'&&tr&&td&&p&这里是内容区！&/p&&a href='javascript:saveDiv()'&保留这个位置和大小&/a&&/td&&/tr&&/table&";div.appendChild(contentDiv);//调整大小var reDiv = cDiv("div");reDiv.style.cssText = "right: 0 bottom: 0 width: 5 height: 5 position:";if (isResize){reDiv.style.cursor = "se-resize";reDiv.setAttribute("onmousedown", function(){setResize(this)});}else{reDiv.style.cursor = "default";}div.appendChild(reDiv);}var oX, oY, oLeft, oTop, oWidth, oH //存储原始移动前的位置var divClone, oD //克隆的节点和原始节点var oT//clone拖移的节点function setMove(obj){if (event.button == 1){if (oTime){clearTimeout(oTime);divClone.parentNode.removeChild(divClone);}oDiv = obj.parentNdivClone = oDiv.cloneNode(true);divClone.style.filter = "Alpha(opacity=50)";divClone.childNodes[1].setAttribute("onmousemove", function(){startMove(this)});divClone.childNodes[1].setAttribute("onmouseup", function(){endMove()});oX = parseInt(event.clientX);oY = parseInt(event.clientY);oLeft = parseInt(divClone.style.left);oTop = parseInt(divClone.style.top);document.body.appendChild(divClone);divClone.childNodes[1].setCapture();eventType = "move";}}//拖移function startMove(obj){if (eventType == "move" && event.button == 1){var moveDiv = obj.parentNmoveDiv.style.left = (oLeft + event.clientX - oX) + "px";moveDiv.style.top = (oTop + event.clientY - oY) + "px";}}//拖移结束调用动画function endMove(){if (eventType == "move"){divClone.childNodes[1].releaseCapture();move(parseInt(divClone.style.left), parseInt(divClone.style.top));eventType = "";}}//移动的动画function move(aimLeft, aimTop){var nowLeft = parseInt(oDiv.style.left);var nowTop = parseInt(oDiv.style.top);var moveSize = 30;if (nowLeft & aimLeft + moveSize || nowLeft & aimLeft - moveSize || nowTop & aimTop + moveSize || nowTop & aimTop - moveSize){oDiv.style.left = aimLeft & nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft & nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";oDiv.style.top = aimTop & nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop & nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";oTime = setTimeout("move(" + aimLeft + ", " + aimTop + ")", 1);}else{oDiv.style.left = divClone.style.oDiv.style.top = divClone.style.divClone.parentNode.removeChild(divClone);divClone ==}}//clone调整大小的节点function setResize(obj){if (event.button == 1){if (oTime){clearTimeout(oTime);divClone.parentNode.removeChild(divClone);}oDiv = obj.parentNdivClone = oDiv.cloneNode(true);divClone.style.filter = "Alpha(opacity=50)";divClone.childNodes[4].setAttribute("onmousemove", function(){startResize(this)});divClone.childNodes[4].setAttribute("onmouseup", function(){endResize()});oX = parseInt(event.clientX);oY = parseInt(event.clientY);oWidth = parseInt(divClone.style.width);oHeight = parseInt(divClone.style.height);document.body.appendChild(divClone);divClone.childNodes[4].setCapture();eventType = "resize";}}//拖动调整大小function startResize(obj){if (eventType == "resize" && event.button == 1){var nX = event.clientX;var nY = event.clientY;if (nX & oX - oWidth && nY & oY - oHeight + 40){var resizeDiv = obj.parentNresizeDiv.style.width = (oWidth + event.clientX - oX) + "px";resizeDiv.style.height = (oHeight + event.clientY - oY) + "px";resizeDiv.childNodes[3].style.height = (parseInt(resizeDiv.style.height) - 40) + "px";}}}//调整大小结束function endResize(){if (eventType == "resize"){divClone.childNodes[4].releaseCapture();resize(parseInt(divClone.style.width), parseInt(divClone.style.height));eventType = "";}}//调整大小的动画function resize(aimWidth, aimHeight){var nowWidth = parseInt(oDiv.style.width);var nowHeight = parseInt(oDiv.style.height);var resizeSize = 30;if (nowWidth & aimWidth + resizeSize || nowWidth & aimWidth - resizeSize || nowHeight & aimHeight + resizeSize || nowHeight & aimHeight - resizeSize){oDiv.style.width = aimWidth & nowWidth + resizeSize ? (nowWidth + resizeSize) + "px" : aimWidth & nowWidth - resizeSize ? (nowWidth - resizeSize) + "px" : nowWidth + "px";oDiv.style.height = aimHeight & nowHeight + resizeSize ? (nowHeight + resizeSize) + "px" : aimHeight & nowHeight - resizeSize ? (nowHeight - resizeSize) + "px" : nowHeight + "px";oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) + "px";oTime = setTimeout("resize(" + aimWidth + ", " + aimHeight + ")", 1);}else{oDiv.style.width = divClone.style.oDiv.style.height = divClone.style.oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) + "px";divClone.parentNode.removeChild(divClone);divClone ==}}//关闭DIVfunction eCloseDiv(){if (div){div.parentNode.removeChild(div);var ipt = document.getElementsByTagName("input");for(var i = 0; i & ipt. i++){ipt[i].disabled =}div =}}//保留位置和大小function saveDiv(){if (div){saveLeft = div.style.saveTop = div.style.saveWidth = div.style.saveHeight = div.style.alert("保留成功！");}}//快捷键document.onkeydown = function(){event.keyCode == 27 ? eCloseDiv() : //Esc快捷键event.ctrlKey && (event.keyCode == 83 || event.keyCode == 115) ? saveDiv() : //ctrl+s保存位置event.ctrlKey && event.keyCode == 13 ? setDiv() : null //ctrl+enter打开Div!event.ctrlKey && (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowMove(event.keyCode) : event.ctrlKey && (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowResize(event.keyCode) :}//上下左右箭头移动divfunction arrowMove(eKeyCode){if (div){var isMove = document.getElementById("isMove").if (isMove){switch(eKeyCode){case 37:div.style.left = (parseInt(div.style.left) - 1) + "px"; //leftbreakcase 38:div.style.top = (parseInt(div.style.top) - 1) + "px"; //upbreakcase 39:div.style.left = (parseInt(div.style.left) + 1) + "px"; //rightbreakcase 40:div.style.top = (parseInt(div.style.top) + 1) + "px"; //downbreak}}}}//ctrl+上下左右箭头调整div大小function arrowResize(eKeyCode){if (div){var isResize = document.getElementById("isResize").if (isResize){switch(eKeyCode){case 37:div.style.width = (parseInt(div.style.width) - 1) + "px"; //leftbreakcase 38:div.style.height = (parseInt(div.style.height) - 1) + "px"; //upbreakcase 39:div.style.width = (parseInt(div.style.width) + 1) + "px"; //rightbreakcase 40:div.style.height = (parseInt(div.style.height) + 1) + "px"; //downbreak}}}}&/script&&body&&p&&input type="checkbox" id="isMove" /&&label for="isMove"&可移动&/label&&&&&input type="checkbox" id="isResize" /&&label for="isResize"&可调整大小&/label&&&&&/p&&p&&input type="radio" name="radio" id="radio1" checked /&&label for="radio1"&默认居中打开&/label&&&&&input type="radio" name="radio" id="radio2" /&&label for="radio2"&保留位置上打开&/label&&/p&&p&&a href="javascript:setDiv()"&打开DIV&/a&&/p&&p style="font-weight: bold"&操作说明：&/p&&ol&&li&选中复选框（可移动、可调整大小）后，打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用);&br&反之，不可移动/调整大小(此时移动/调整大小快捷键无效)&/li&&li&单选框默认居中打开选中，无论有无保存DIV位置和大小均以默认位置及大小打开DIV&/li&&li&单选框保留位置上打开选中，如果未发现保存记录以默认方式打开，否则以保存的位置及大小打开&/li&&li&如果选中可移动后，鼠标经过标题位置（蓝色背景）处会变成移动的图标，此时按住鼠标左键会产生一个半透明的DIV，按住鼠标不动拉动此半透明DIV会跟随移动，释放鼠标左键后会产生一段原始位置移动至半透明位置的动画，当动画重叠时，半透明的DIV将回收。&/li&&li&如果选中可调整大小后，鼠标经过整个DIV的最右下角处会变成伸缩的图标，此时按住鼠标左键会产生一个半透明的DIV，按住鼠标不动拉动此半透明DIV会随着移动而调整大小，释放鼠标左键后会产生一段原始大小伸缩至半透明大小的动画，当动画重叠时，半透明的DIV将回收。&/li&&li&DIV的右上角有关闭按钮，按下后DIV将remove&/li&&/ol& &p style="font-weight: bold"&快捷键说明：&ol&&li&Ctrl + Enter : 打开div&/li&&li&Ctrl + s(大小写均可) : 保存div的大小和位置&/li&&li&上下左右箭头 : 轻移div位置&/li&&li&Ctrl + 上下左右箭头 : 轻调div大小&/li&&li&Esc : 关闭Div&/li&&/ol& &/p&&/body&&/html&JS操作DIV全属性( 19:15:37)转载▼标签： it 分类： js view plain&!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& &title&JS操作DIV全攻略&/title& &mce:style&&!-- .test{width:200 height:200 background-color:Rfont-size:12 font-weight:border:solid 1} --&&/mce:style&&style mce_bogus="1"& .test{width:200 height:200 background-color:Rfont-size:12 font-weight:border:solid 1} &/style& &mce:script type="text/javascript"&&!-- //控制内容 function settext() { var el=document.getElementByIdx_x("testdiv"); el.innerHTML="测试数据！"; } //控制位置 function setlocation() { var el=document.getElementByIdx_x("testdiv"); el.style.top="100px"; el.style.left="100px"; } //设置背景色 function setbrcolor() { var el=document.getElementByIdx_x("testdiv"); el.style.backgroundColor="#997788"; } //设置背景图 function setbrimg() { var el=document.getElementByIdx_x("testdiv"); el.style.backgroundImage="url(img.jpg)"; } //设置字体 function setfont() { var el=document.getElementByIdx_x("testdiv"); el.style.color="#FFFFFF"//设置字体 el.style.fontSize="15px"; el.style.fontWeight="bold"; } //设置calss样式 function setcss() { var el=document.getElementByIdx_x("testdiv"); el.className="test"; } //获得键盘按键并操作DIV上下左右移动 top left 必须加px function GetKey(e) { var el=document.getElementByIdx_x("testdiv");//获得DIV e=e||//兼容IE FF var Key=e.keyCode||e.which||e.charC//获得键盘码 //alert(Key);//弹出KEY值 if(Key=="39")//右 { el.style.left=(parseInt(el.style.left==""?"0":el.style.left)+1)+"px"; }else if(Key=="37")//左 { el.style.left=(parseInt(el.style.left==""?"0":el.style.left)-1)+"px"; }else if(Key=="38")//上 { el.style.top=(parseInt(el.style.top==""?"0":el.style.top)-1)+"px"; }else if(Key=="40"){//下 el.style.top=(parseInt(el.style.top==""?"0":el.style.top)+1)+"px"; } } document.onkeyup = GetK//附加键盘按下事件 // --&&/mce:script& &/head& &body style="margin:0px" mce_style="margin:0px"& &!-- position:absolute 如果控制移动必须加上这个 --& &div id="testdiv" style="width:100 height:100 background-color:#d3d3d3; position:"&&/div& &br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&&br /&上下左右可以操作DIV，已兼容IE FF&br /& &input type="button" value="控制层内容" onclick="settext()" /& &input type="button" value="控制层位置" onclick="setlocation()" /& &input type="button" value="控制层背景色" onclick="setbrcolor()" /& &input type="button" value="控制层背景图" onclick="setbrimg()" /& &input type="button" value="控制层文字" onclick="setfont()" /& &input type="button" value="控制层css" onclick="setcss()" /& &/body& &/html&
邀请好友扫一扫分享给TA或者 长按上图保存二维码，使用微信扫一扫右上角的"相册"扫码，再分享好友或朋友圈