js取屏幕中间位置

最新推荐文章于 2023-09-30 20:24:54 发布

bestlove13141516

最新推荐文章于 2023-09-30 20:24:54 发布

阅读量5.5k

点赞数

分类专栏： JAVASCRIPT 文章标签： js取屏幕中间位置

本文链接：https://blog.youkuaiyun.com/bestlove12345/article/details/53537456

版权

JAVASCRIPT 专栏收录该内容

16 篇文章

订阅专栏

 
 <!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 
 > 
 
 < 
 meta  
 http-equiv 
 = 
 "Content-Type"  
 content 
 = 
 "text/html; charset=gb2312"  
 /> 
 
 < 
 title 
 >无标题文档</ 
 title 
 > 
 
 < 
 style  
 type 
 = 
 "text/css" 
 > 
 
      
 #divTest{ 
 
          
 background:#F1F1F1; border:1px solid #006699; height:100px; width:100px; 
 
      
 } 
 
 </ 
 style 
 > 
 
 < 
 script  
 type 
 = 
 "text/javascript" 
 > 
 
 function move(){ 
 
      
 var obj = document.getElementById("div"); 
 
      
 obj.style.display = ""; 
 
       
 
      
 var clientWidth = document.documentElement.clientWidth; 
 
      
 var clientHeight = document.documentElement.clientHeight; 
 
      
 var objWidth = obj.offsetWidth; 
 
      
 var objHeight = obj.offsetHeight; 
 
      
 var x = ( clientWidth - objWidth ) / 2; 
 
      
 var y = ( clientHeight - objHeight ) / 2; 
 
       
 
      
 obj.style.position = "absolute"; 
 
      
 obj.style.left = x + "px"; 
 
      
 obj.style.top = y + "px"; 
 
 } 
 
 </ 
 script 
 > 
 
 </ 
 head 
 > 

    
 
 < 
 body 
 > 
 
 < 
 input  
 type 
 = 
 "button"  
 value 
 = 
 "测试"  
 onclick 
 = 
 "move()"  
 /> 
 
 < 
 div  
 id 
 = 
 "divTest"  
 style 
 = 
 "display:none" 
 > 
 
      
 测试内容 
 
 </ 
 div 
 > 
 
 </ 
 body 
 > 
 
 </ 
 html 
 > 