`

js获取浏览器长度、宽度!

 
阅读更多
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条

)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

---------------------完整的例子---------------------






<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"
</script>



注:所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。其他 Window 方法:

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
分享到:
评论

相关推荐

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    js获取input长度并根据页面宽度设置其大小及居中对齐

    在JavaScript中,动态地获取输入框(input)的长度,并根据页面宽度来调整其尺寸以及实现居中对齐,是一项常见的前端布局任务。这有助于创建响应式的用户界面,确保元素在不同屏幕尺寸下都能良好展示。以下将详细...

    js获取网页宽高

    本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要理解两个关键的概念:浏览器窗口(viewport)和文档(document)的尺寸。浏览器窗口是用户在屏幕上看到的部分,包括...

    JS获取文件大小方法小结

    总的来说,获取文件大小在JavaScript中并不是一项简单任务,因为浏览器安全性和API的差异。对于现代浏览器,推荐使用`FileReader API`来实现,而对老版本的IE浏览器,则可能需要依赖ActiveX或其他特定技术。记得在...

    textarea长度控制

    此段代码使用了原生JavaScript,通过`onpaste`事件处理程序获取剪贴板中的文本,并判断其长度是否超过最大允许长度。如果超过,则截取适当长度的文本替换原剪贴板内容。 ##### 3.3 其他事件处理 除了`keyup`和`...

    Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码

    - **屏幕分辨率与视口尺寸**:屏幕尺寸是指屏幕对角线的长度,而浏览器窗口的大小(视口尺寸)则可以使用`window.innerWidth`和`window.innerHeight`来获取。 - **User Agent 字符串**:User Agent是一个字符串,...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    40、原生JavaScript获取移动设备屏幕宽度 41、原生JavaScript完美判断是否为网址 42、原生JavaScript根据样式名称检索元素对象 43、原生JavaScript判断是否以某个字符串开头 44、原生JavaScript判断是否以某个字符串...

    js获取图片长和宽度的代码

    下面将详细介绍如何利用JavaScript来获取图片的长度(宽度)和高度。 #### 1. 基本原理 在HTML中,我们可以为`&lt;img&gt;`元素设置一个`onload`事件处理器,当图片加载完成之后,可以通过`this.width`和`this.height`...

    浏览器兼容性汇总

    **解决方案**: 统一采用 `document.getElementById("idName")` 方法来获取DOM元素,以确保代码在不同浏览器中的一致性。 ##### 2. const问题 - **火狐(Firefox)**: 支持使用 `const` 关键字或 `var` 定义常量。 ...

    CSS使用calc()获取当前可视屏幕高度的实现

    虽然现代浏览器普遍支持`calc()`和相对长度单位,但在老版本的浏览器中可能会存在问题。此外,对于一些复杂布局或涉及动态内容的场景,可能还需要结合JavaScript来实现更精细的控制。 总的来说,CSS3的相对长度单位...

    计算字符串宽度

    这个宽度不同于字符串的字符数量或长度,因为不同字符的宽度可能不同,比如英文的字母和数字通常比中文字符窄,而某些特殊字符可能更宽。 字符串宽度的计算涉及以下几个关键知识点: 1. **字体**:字体决定了字符...

    web文本框宽度自适应

    `Timer.js`和`debug.js`是JavaScript文件,`Timer.js`可能包含了一个定时器,用于周期性地检查并更新文本框宽度,以应对用户连续输入的情况。而`debug.js`可能用于调试目的,包含了一些辅助函数,帮助开发者检测和...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    当内容长度超过这个宽度时,多余的部分会被截断,通常用省略号表示。这是因为`&lt;select&gt;`元素在大多数浏览器中是原生控件,它的样式和行为受到浏览器的严格控制,开发者很难直接通过CSS来改变其内部表现。 解决这个...

    javascript获取网页各种高宽及位置的方法总结.docx

    ### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**:表示屏幕的宽度(以像素为单位)。 - **`screen.height`**:表示屏幕的高度(以像素为单位)。 - **`screen....

    javascript经典特效---对按钮长度的控制.rar

    总结一下,JavaScript在处理按钮长度控制时提供了丰富的功能,包括但不限于直接设置固定宽度、根据内容动态计算宽度以及响应用户交互改变尺寸。这些技术在构建交互式、响应式的网页应用时非常实用。在实际项目中,...

    js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例

    题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?...注意:设置宽度,overflow:hidden, white-space:nowrap, te

    easyui datagrid标题列宽度自适应

    标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性,它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,...

    js常用的dom高度长度详细

    在JavaScript中,DOM提供了多种获取元素尺寸和位置的方法,这对于进行页面布局、动画效果或者事件处理时非常有用。下面我们将详细探讨这些知识点: 1. **可见区域尺寸**: - `document.body.clientWidth` 和 `...

Global site tag (gtag.js) - Google Analytics