当前位置:首页 > 生活百科

js获取手机屏幕高度和宽度(js获取手机屏幕分辨率)

栏目:生活百科日期:2025-05-06浏览:0

一、上一文记录了JS中网页、屏幕中的各种宽高的辨析,这一节主要记录JS中的获取图片各种高宽方面的不同,摘录笔记仅供学习参考所用。

1、可以获取图片高宽的方法有:

onload后在打印;

obj.style.width(height);

obj.offsetWidth(offsetHeight);

obj.clientWidth(clientHeight);

getComputedStyle 与 currentStyle;

obj.naturalWidth(naturalHeight) ;

JQ获取;

获取图片路径(src)的方法;

2、方法详解:

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

// 图片地址 后面加时间戳是为了避免缓存

var img_url = &‘/placea/placeb/**.jpg?&’+Date.parse(new Date());

// 创建图片对象

var img = new Image();

// 改变图片的地址

img.src = img_url;

// 加载完成执行

img.onload = function(){

// 打印输出

alert(&‘width:&’+img.width+&’,height:&’+img.height);

};

通过onload就能获取到图片的宽高了,但onload大一点的图通常都比较慢,此方法获取宽高不划算。

obj.style.width:只有在标签里用style属性写进了width的大小,才可以获取到值,否则只返回的为空。注意:在引入的样式表中添加width值(不管是link引入还是html页面中使用style标签)也一样获取不到值,返回为空。obj.offsetWidth(offsetHeight);obj.clientWidth(clientHeight);这俩方法如果标签没有设置padding值及border值,那么它们两个获取到的值是一样的。但很多情况下都不是这样的,其实offsetWidth得到的是width值+padding值+border值,clientWidth得到的是width值+padding值。getComputedStyle;currentStyle;这俩是处理兼容性的两个方法,获取到的值都是图片在屏幕上显示的仅仅是图片的高宽值,不会获取到img标签的padding及border值;但其中getComputedStyle适用于
Firefox/IE9/Safari/Chrome/Opera浏览器,currentStyle适用于IE6/7/8。但是如果img标签即使没有设置style属性也没有引入样式表,那么只有getComputedStyle能获取到值,即为图片本身高宽值,currentStyle则返回auto。obj.naturalWidth(naturalHeight)方法,这是HTML5里新添加的一个获取元素高宽的方法,但只适用于
Firefox/IE9/Safari/Chrome/Opera浏览器。需要注意是的在IE6/7/8浏览器中image.src只有在img图片完全加载出来以后才获取得到,否则会报错。JQ获取图片宽高:假设图片是&<img /&>,图片的宽度为width,高度为height

var width = $(&“img&”).width();

var height = $(&“img&”).height();

获取图片路径(src)的方法:① 通过获取图片img节点的src属性&<img id=&’test&’ src=&’1.png&’ /&>② 通过document.getElementById找到img节点var oImg= document.getElementById(&‘test&’);③ 获取src属性alert(oImg.src);//获取src属性

“js获取手机屏幕高度和宽度(js获取手机屏幕分辨率)” 的相关文章

上古卷轴5最强武器(最强武器装备排行)

《上古卷轴5》历久不衰直至今日喜欢玩的粉丝依然很多,不仅是可玩性很高,还因为《上古卷轴5》中的武器类型多种多样,下面让我们一起看看《上古卷轴5》单双手武器使用心...

win7网络设置在哪里设置(win7插网线联网的方法)

有深度技术的朋友都挺喜欢使用正版win7系统的,但是因为办公室里面很多同事都使用win10正式版了,那我们在工作中需要共享文件,就需要对win7进行高级共享设置...

stm32嵌入式系统开发实战指南(嵌入式系统stm32课程设计

《例说STM32(第3版)》将由浅入深,带领大家进入STM32的世界。  《例说STM32(第3版)》总共分为3篇:第1篇为硬件篇,主要介绍《例说STM32(第...

创业板上市时间是什么时候,2020最新ipo上市排队一览表

公司上市可以募集资金、提高知名度以及员工认同感,还可以完善企业制度和管理。同时公司上市也是一件繁复的工作,包括改立股份公司、辅导、申请文件的制作等等,最重要的是...

免费seo优化怎么做,免费seo优化的渠道和方法

网站免费SEO优化怎么做才能达到网络推广效果,进而增加流量的转化率?SEO其实就是通过对网站不断的优化,赢得搜索引擎的信任,得到很不错的网站的排名,从而达到广告...

ultra iso制作启动U盘(教你将windows封装成iso镜像)

三星在发布全新旗舰GalaxyS21Ultra的同时,也带来了新的一亿像素图像传感器ISOCELLHM3。它拥有0.8μm像素大小,支持像素九合一功能并且可以录...

u盘变成raw怎么修复(u盘raw格式数据恢复方法)

好了就是这款啦,我用了很久了,叫做formattool可以强制格式化你的U盘,在你的U盘出现无法读取或者任何问题的时候的最暴力的解决办法。当然还可以低格,但是风...

cad粘贴后什么都不显示(cad跨图纸粘贴不显示的解决方法

在使用浩辰CAD制图软件绘制图纸的过程中,虽然在画图的时候没有任何错误提示,但是拖动的时候看不到预览效果,画完也看不到图形,如下图所示,这是什么原因呢?接下来就...

互联网创业者应该具备哪些素质(一文解说创业者必备素质

完整的书名:《黑客与画家:硅谷创业之父PaulGraham文集》,是由阮一峰在2010年翻译并出版的,英文原版出版于2004年,其中有不少文章甚至发表于2001...

seo如何分析网站,网站seo常用分析工具分享

1分析是SEO重要的职业基础可以说懂得分析一个网站是SEO人员的核心基础技能之一了。我以前的文章中也说过,在资深SEO面前,也没有哪个网站的策略或者技巧是能够隐...