Wiki源代码JavaScript Cheat Sheet
由 Qiongpan Ke 于 2024-04-22 最后修改
复制
导出
打印预览
源代码
子项
内容
附件
历史记录
信息
Likes
显示最后作者
| author | version | line-number | content |
|---|---|---|---|
| 1 | = 获取浏览器分辨率 = | ||
| 2 | |||
| 3 | {{example}} | ||
| 4 | {{html}} | ||
| 5 | <pre id='browser-info'></pre> | ||
| 6 | <script> | ||
| 7 | document.addEventListener('DOMContentLoaded', function() { | ||
| 8 | var browserInfo = document.querySelector('#browser-info'); | ||
| 9 | browserInfo.innerText = JSON.stringify({ | ||
| 10 | "document.body.clientWidth": document.body.clientWidth, /* 可见区域宽度 */ | ||
| 11 | "document.body.clientHeight": document.body.clientHeight, /* 可见区域高度 */ | ||
| 12 | "document.documentElement.clientWidth": document.documentElement.clientWidth, /* 页面对象宽度（即BODY对象宽度加上Margin宽） */ | ||
| 13 | "document.documentElement.clientHeight": document.documentElement.clientHeight, /* 页面对象高度（即BODY对象高度加上Margin高） */ | ||
| 14 | "document.body.offsetWidth": document.body.offsetWidth, /* 网页可见区域宽(body)，包括border、margin等 */ | ||
| 15 | "document.body.offsetHeight": document.body.offsetHeight, /* 网页可见区域宽(body)，包括border、margin等 */ | ||
| 16 | "document.body.scrollWidth": document.body.scrollWidth, /* 网页正文全文宽，包括有滚动条时的未见区域 */ | ||
| 17 | "document.body.scrollHeight": document.body.scrollHeight, /* 网页正文全文高，包括有滚动条时的未见区域 */ | ||
| 18 | "document.body.scrollTop": document.body.scrollTop, /* 网页被卷去的Top(滚动条) */ | ||
| 19 | "document.body.scrollLeft": document.body.scrollLeft, /* 网页被卷去的Left(滚动条) */ | ||
| 20 | "window.screenTop": window.screenTop, /* 浏览器距离Top */ | ||
| 21 | "window.screenLeft": window.screenLeft, /* 浏览器距离Left */ | ||
| 22 | "window.screen.height": window.screen.height, /* 屏幕分辨率的高 */ | ||
| 23 | "window.screen.width": window.screen.width, /* 屏幕分辨率的宽 */ | ||
| 24 | "window.screen.availHeight": window.screen.availHeight, /* 屏幕可用工作区的高 */ | ||
| 25 | "window.screen.availWidth": window.screen.availWidth, /* 屏幕可用工作区的宽 */ | ||
| 26 | }, null, 4); | ||
| 27 | }) | ||
| 28 | </script> | ||
| 29 | {{/html}} | ||
| 30 | {{/example}} | ||
| 31 | |||
| 32 | |||
| 33 | = 获取屏幕分辨率 = | ||
| 34 | |||
| 35 | {{example}} | ||
| 36 | {{html}} | ||
| 37 | <pre id='screen-info'></pre> | ||
| 38 | <script> | ||
| 39 | document.addEventListener('DOMContentLoaded', function() { | ||
| 40 | var screenInfo = document.querySelector('#screen-info'); | ||
| 41 | screenInfo.innerText = 'window.screen.width : ' + window.screen.width + '\n' | ||
| 42 | + 'window.screen.height : ' + window.screen.height + '\n' | ||
| 43 | + 'window.devicePixelRatio : ' + window.devicePixelRatio + ' (' + (Math.round(window.devicePixelRatio * 10000) / 100) + '%)\n' | ||
| 44 | + 'Actual screen resolution : ' + (window.screen.width * window.devicePixelRatio) + ' x ' + (window.screen.height * window.devicePixelRatio) + '\n' | ||
| 45 | + 'Actual screen DPI : ' + getScreenDPI(); | ||
| 46 | }, false); | ||
| 47 | |||
| 48 | function getScreenDPI() { | ||
| 49 | for (var dpi = 56; dpi < 2000; ++dpi) { | ||
| 50 | if (matchMedia('(max-resolution: ' + dpi + 'dpi)').matches === true) { | ||
| 51 | return dpi; | ||
| 52 | } | ||
| 53 | } | ||
| 54 | } | ||
| 55 | </script> | ||
| 56 | {{/html}} | ||
| 57 | {{/example}} | ||
| 58 | |||
| 59 | |||
| 60 | = 获取图片大小 = | ||
| 61 | |||
| 62 | {{example}} | ||
| 63 | {{html}} | ||
| 64 | <img id="image" src="/bin/download/FlamingoThemes/Iceberg/logo.svg" style="background: #3e7cbc;" /> | ||
| 65 | <pre id="image-info"></pre> | ||
| 66 | <script> | ||
| 67 | document.addEventListener('DOMContentLoaded', function() { | ||
| 68 | var image = document.querySelector('#image'); | ||
| 69 | var imageInfo = document.querySelector('#image-info'); | ||
| 70 | var info = getImageInfo(image); | ||
| 71 | imageInfo.innerText = 'image.width : ' + info.width + '\n' | ||
| 72 | + 'image.height : ' + info.height; | ||
| 73 | }, false); | ||
| 74 | |||
| 75 | function getImageInfo(imageOrUrl) { | ||
| 76 | var image = new Image(); | ||
| 77 | image.src = (typeof imageOrUrl === 'string' ? imageOrUrl : imageOrUrl.src); | ||
| 78 | return { | ||
| 79 | width : image.width, | ||
| 80 | height : image.height | ||
| 81 | }; | ||
| 82 | } | ||
| 83 | </script> | ||
| 84 | {{/html}} | ||
| 85 | {{/example}} |
粤公网安备 44011802000481号 粤ICP备2020117634号