JavaScript - JavaScript Cheat Sheet

Page / - 最后修改者 Qiongpan Ke 打开 2024-04-22

JavaScript Cheat Sheet

最后修改者 Qiongpan Ke

打开 2024-04-22

内容列表

获取浏览器分辨率

获取屏幕分辨率

获取图片大小

获取浏览器分辨率

Example

Source

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

获取屏幕分辨率

Example

Source

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

获取图片大小

Example

Source

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