欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-21 18:46:46
一、上一文记录了js中网页、屏幕中的各种宽高的辨析,这一节主要记录js中的获取图片各种高宽方面的不同,摘录笔记仅供学习参考所用。1、可以获取图片高宽的方法有:onload后在打印;obj.style....

一、上一文记录了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获取手机屏幕分辨率)