# Wiki源代码JavaScript Cheat Sheet

由 Qiongpan Ke 于 2024-04-22 最后修改
导出
Office格式
以PDF格式导出 以ODT格式导出 以RTF格式导出
其他格式

选择要导出的页面：

选择所有/ 无

Legend:
  已创建页面
  修改后的扩展页
  Clean Extension Page

以HTML格式导出

显示最后作者

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}}

# 同级页面

# 博客类别

- https://keqiongpan.cn:80/bin/view/Blog/">全部

- News (0)
- Other (0)
- Personal (0)

# 当前已创建的

- 线性布局组件与占位组件
- React
- CSS Flexbox Cheat Sheet
- CSS界面布局控制属性概述
- CSS

粤公网安备 44011802000481号 粤ICP备2020117634号
版权所有，如发现盗用模仿必追诉法律责任！
CopyRight © 2020-2023 keqiongpan.cn. All Right Reserved.