# JavaScript Cheat Sheet

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

选择要导出的页面：

选择所有/ 无

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

以HTML格式导出

# 获取浏览器分辨率

{{html}}
<pre id='browser-info'></pre>
<script>
document.addEventListener('DOMContentLoaded', function() {
var browserInfo = document.querySelector('#browser-info');
browserInfo.innerText = JSON.stringify({
"document.body.clientWidth": document.body.clientWidth, /* 可见区域宽度 */
"document.body.clientHeight": document.body.clientHeight, /* 可见区域高度 */
"document.documentElement.clientWidth": document.documentElement.clientWidth, /* 页面对象宽度（即BODY对象宽度加上Margin宽） */
"document.documentElement.clientHeight": document.documentElement.clientHeight, /* 页面对象高度（即BODY对象高度加上Margin高） */
"document.body.offsetWidth": document.body.offsetWidth, /* 网页可见区域宽(body)，包括border、margin等 */
"document.body.offsetHeight": document.body.offsetHeight, /* 网页可见区域宽(body)，包括border、margin等 */
"document.body.scrollWidth": document.body.scrollWidth, /* 网页正文全文宽，包括有滚动条时的未见区域 */
"document.body.scrollHeight": document.body.scrollHeight, /* 网页正文全文高，包括有滚动条时的未见区域 */
"document.body.scrollTop": document.body.scrollTop, /* 网页被卷去的Top(滚动条) */
"document.body.scrollLeft": document.body.scrollLeft, /* 网页被卷去的Left(滚动条) */
"window.screenTop": window.screenTop, /* 浏览器距离Top */
"window.screenLeft": window.screenLeft, /* 浏览器距离Left */
"window.screen.height": window.screen.height, /* 屏幕分辨率的高 */
"window.screen.width": window.screen.width, /* 屏幕分辨率的宽 */
"window.screen.availHeight": window.screen.availHeight, /* 屏幕可用工作区的高 */
"window.screen.availWidth": window.screen.availWidth, /* 屏幕可用工作区的宽 */
}, null, 4);
})
</script>
{{/html}}

# 获取屏幕分辨率

{{html}}
<pre id='screen-info'></pre>
<script>
document.addEventListener('DOMContentLoaded', function() {
var screenInfo = document.querySelector('#screen-info');
screenInfo.innerText = 'window.screen.width : ' + window.screen.width + '\n'
+ 'window.screen.height : ' + window.screen.height + '\n'
+ 'window.devicePixelRatio : ' + window.devicePixelRatio + ' (' + (Math.round(window.devicePixelRatio * 10000) / 100) + '%)\n'
+ 'Actual screen resolution : ' + (window.screen.width * window.devicePixelRatio) + ' x ' + (window.screen.height * window.devicePixelRatio) + '\n'
+ 'Actual screen DPI : ' + getScreenDPI();
}, false);
function getScreenDPI() {
for (var dpi = 56; dpi < 2000; ++dpi) {
if (matchMedia('(max-resolution: ' + dpi + 'dpi)').matches === true) {
return dpi;
}
}
}
</script>
{{/html}}

# 获取图片大小

{{html}}
<img id="image" src="/bin/download/FlamingoThemes/Iceberg/logo.svg" style="background: #3e7cbc;" />
<pre id="image-info"></pre>
<script>
document.addEventListener('DOMContentLoaded', function() {
var image = document.querySelector('#image');
var imageInfo = document.querySelector('#image-info');
var info = getImageInfo(image);
imageInfo.innerText = 'image.width : ' + info.width + '\n'
+ 'image.height : ' + info.height;
}, false);
function getImageInfo(imageOrUrl) {
var image = new Image();
image.src = (typeof imageOrUrl === 'string' ? imageOrUrl : imageOrUrl.src);
return {
width : image.width,
height : image.height
};
}
</script>
{{/html}}
0
标签：
由 Qiongpan Ke 在 2024-04-22 创建

- 附件 （0）
- 历史记录
- 信息

# 同级页面

# 博客类别

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