Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。
获取画布宽度的方式如下
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidt
获取窗口的高度与宽度(不包含工具条与滚动条):
var w=window.innerWidth;
var h=window.innerHeight;
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title>test</title> 5 <style type="text/css"> 6 #All{ width: 100%; height: 3000px;} 7 </style> 8 </head> 9 <body> 10 <div id="All"> 11 <div id="img" style="position: absolute; z-index:99;"> 12 <a href="#" target="_blank"><img src="Images/OPVTI.jpg" border="0" style="cursor: pointer;" style="cursor: pointer;" /></a> 13 <script language="JavaScript"> 14 <!--Begin 15 var xPos = document.body.clientWidth - 20; 16 var yPos = document.body.clientHeight / 2; 17 var step = 1; 18 var delay = 10; 19 var height = 0; 20 var Hoffset = 0; 21 var Woffset = 0; 22 var yon = 0; 23 var xon = 0; 24 var pause = true; 25 var interval; 26 img.style.top = yPos; 27 function changePos() { 28 width = document.body.clientWidth; 29 height = document.body.clientHeight; 30 Hoffset = img.offsetHeight; 31 Woffset = img.offsetWidth; 32 img.style.left = xPos + document.body.scrollLeft; 33 img.style.top = yPos + document.body.scrollTop; 34 if (yon) { 35 yPos = yPos + step; 36 } else { 37 yPos = yPos - step; 38 } 39 if (yPos < 0) { 40 yon = 1; 41 yPos = 0; 42 } 43 if (yPos >= (height - Hoffset)) { 44 yon = 0; 45 yPos = (height - Hoffset); 46 } 47 if (xon) { 48 xPos = xPos + step; 49 } else { 50 xPos = xPos - step; 51 } 52 if (xPos < 0) { 53 xon = 1; 54 xPos = 0; 55 } 56 if (xPos >= (width - Woffset)) { 57 xon = 0; 58 xPos = (width - Woffset); 59 } 60 } 61 function start() { 62 img.visibility = "visible"; 63 interval = setInterval('changePos()', delay); 64 } 65 function pause_resume() { 66 if (pause) { 67 clearInterval(interval); 68 pause = false; 69 } else { 70 interval = setInterval('changePos()', delay); 71 pause = true; 72 } 73 } 74 start(); 75 // End --> 76 </script> 77 </div> 78 </div> 79 </body> 80 </html>