js或者jquery如何实时获取浏览器的高度和宽度的

js或者jquery如何实时获取浏览器的高度和宽度的,第1张

jquery

$(function(){

/调整窗口自动调整宽度/

$(window)resize(function(){

var h = $(window)height();

var w = $(window)width();

consoleinfo("窗口高度:" + h + "; 窗口宽度:" + w);

});

});

要在js中获得浏览器的高度可以参考以下步骤(具体代码见最后):

1、outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。

2、outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。

3、innerheight 返回窗口的文档显示区的高度。

4、innerwidth 返回窗口的文档显示区的宽度。

补充:

在浏览器兼容方面:

1、所有主流浏览器都支持 outerWidth 和 outerHeight 属性。

注意:IE 8 及更早 IE 版本不支持该属性。

2、所有主流浏览器都支持 innerWidth 和 innerHeight 属性。

注意:IE 8 及更早 IE版本不支持这两个属性。

获取代码:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"

<head>

<title>请调整浏览器窗口</title> <meta >

windowonload = function(){

    var div = documentgetElementById("div");

    var width = divoffsetWidth;

    divstyleheight = width+"px" ;

}

javascript获取元素的高度: var obj = documentgetElementById("test"); alert(objheight + "\n" + objwidth); // 200px 200px typeof=string只是将style属性中的值显示出来 扩展: 获取元素的实际大小 clientWidth和clientHeight 这组属性

代码大致如下供参考:

var image=new Image();

imagesrc=//你的背景的src;

var divelement = documentgetElementById(你的div的id);

divelementstyleheight=(imageheightdivelementoffsetWidth)/imagewidth + "px";

几个需要注意的地方是imagesrc=xxx后需要等待直到下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话,那么已经被下载过了,所以直接进行后面的就好。另外以styleheight来设置高度的话后面需要加单位,比如px

以上就是关于js或者jquery如何实时获取浏览器的高度和宽度的全部的内容,包括:js或者jquery如何实时获取浏览器的高度和宽度的、js 如何获得浏览器的高度、js获取动态宽度并赋值给高度,能做到吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/10151998.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存