- 浏览: 67889 次
- 性别:
- 来自: 西安
文章分类
最新评论
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条
)。
对于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() - 调整当前窗口的尺寸
)。
对于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() - 调整当前窗口的尺寸
发表评论
-
Springboot项目中pom.xml的Oracle配置错误问题
2019-09-27 09:09 457前提:开发工具IDEA2019.2,SpringBoot,m ... -
maven如何添加添加ojdbc6
2019-06-24 14:46 9161、设置环境变量 1.1.添加一个环境变量MAVEN_ ... -
windows10 jdk配置
2019-06-24 14:10 407JAVA_HOME=C:\Program Files\Jav ... -
aven配置默认使用的JDK版本
2019-04-04 09:09 435<div class="iteye-blog ... -
获取ztree 当前节点的所有父节点name!
2018-08-02 09:49 728function getFilePath(treeObj ... -
Bootstrap table无法获取pagesize问题解决
2018-05-01 13:20 1181在bootstrap-table.min.js中搜索 &quo ... -
天地图影像地图服务
2018-01-18 14:20 4245全球影像 http://t0.tianditu.cn/im ... -
微信utf-8格式 post方法
2017-11-08 18:58 642@RequestMapping(value = "c ... -
微信jssdk 图片预览接口调用方法!
2017-11-07 16:23 513$(".weui_uploader_files ... -
使用spring @Scheduled注解执行定时任务、
2017-10-31 13:47 425老大说这配置太麻烦、每个调度都需要多加在spring的配置中、 ... -
利用Calendar类来获取当前的日期
2017-10-18 15:04 531import java.util.Calendar; ... -
BootStrap table 传递搜索参数
2017-09-15 17:57 4385function Search() { var ... -
easyui datebox 时间格式化
2017-08-11 10:39 707//easyui 格式化日期控件 $(" ... -
java判断字符串是否为空的方法
2017-04-01 15:55 442方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: ... -
HTTP协议详解
2017-03-29 09:57 467引言 HTTP是一个属于应用层的面向对象的协议,由于其简捷、 ... -
java MongoDB 简单查询
2017-03-22 18:31 435前言 MongoDB的java驱动提供了查询 ... -
js设置form表单内元素为只读属性
2017-03-22 10:57 1375js设置form表单内元素为只读属性 $('#formID' ... -
EasyUI Dialog Buttons 绑定click事件
2017-03-20 11:37 12831、jsp页面定义dialog及Buttons; < ... -
easyui layout 折叠后显示标题
2017-02-06 09:53 829(function($){ var buttonDir = ... -
Easyui 栏目组定义
2016-05-30 15:43 322columns:[[{ title ...
相关推荐
### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...
在JavaScript中,动态地获取输入框(input)的长度,并根据页面宽度来调整其尺寸以及实现居中对齐,是一项常见的前端布局任务。这有助于创建响应式的用户界面,确保元素在不同屏幕尺寸下都能良好展示。以下将详细...
本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要理解两个关键的概念:浏览器窗口(viewport)和文档(document)的尺寸。浏览器窗口是用户在屏幕上看到的部分,包括...
总的来说,获取文件大小在JavaScript中并不是一项简单任务,因为浏览器安全性和API的差异。对于现代浏览器,推荐使用`FileReader API`来实现,而对老版本的IE浏览器,则可能需要依赖ActiveX或其他特定技术。记得在...
此段代码使用了原生JavaScript,通过`onpaste`事件处理程序获取剪贴板中的文本,并判断其长度是否超过最大允许长度。如果超过,则截取适当长度的文本替换原剪贴板内容。 ##### 3.3 其他事件处理 除了`keyup`和`...
- **屏幕分辨率与视口尺寸**:屏幕尺寸是指屏幕对角线的长度,而浏览器窗口的大小(视口尺寸)则可以使用`window.innerWidth`和`window.innerHeight`来获取。 - **User Agent 字符串**:User Agent是一个字符串,...
40、原生JavaScript获取移动设备屏幕宽度 41、原生JavaScript完美判断是否为网址 42、原生JavaScript根据样式名称检索元素对象 43、原生JavaScript判断是否以某个字符串开头 44、原生JavaScript判断是否以某个字符串...
下面将详细介绍如何利用JavaScript来获取图片的长度(宽度)和高度。 #### 1. 基本原理 在HTML中,我们可以为`<img>`元素设置一个`onload`事件处理器,当图片加载完成之后,可以通过`this.width`和`this.height`...
**解决方案**: 统一采用 `document.getElementById("idName")` 方法来获取DOM元素,以确保代码在不同浏览器中的一致性。 ##### 2. const问题 - **火狐(Firefox)**: 支持使用 `const` 关键字或 `var` 定义常量。 ...
虽然现代浏览器普遍支持`calc()`和相对长度单位,但在老版本的浏览器中可能会存在问题。此外,对于一些复杂布局或涉及动态内容的场景,可能还需要结合JavaScript来实现更精细的控制。 总的来说,CSS3的相对长度单位...
这个宽度不同于字符串的字符数量或长度,因为不同字符的宽度可能不同,比如英文的字母和数字通常比中文字符窄,而某些特殊字符可能更宽。 字符串宽度的计算涉及以下几个关键知识点: 1. **字体**:字体决定了字符...
`Timer.js`和`debug.js`是JavaScript文件,`Timer.js`可能包含了一个定时器,用于周期性地检查并更新文本框宽度,以应对用户连续输入的情况。而`debug.js`可能用于调试目的,包含了一些辅助函数,帮助开发者检测和...
当内容长度超过这个宽度时,多余的部分会被截断,通常用省略号表示。这是因为`<select>`元素在大多数浏览器中是原生控件,它的样式和行为受到浏览器的严格控制,开发者很难直接通过CSS来改变其内部表现。 解决这个...
### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**:表示屏幕的宽度(以像素为单位)。 - **`screen.height`**:表示屏幕的高度(以像素为单位)。 - **`screen....
总结一下,JavaScript在处理按钮长度控制时提供了丰富的功能,包括但不限于直接设置固定宽度、根据内容动态计算宽度以及响应用户交互改变尺寸。这些技术在构建交互式、响应式的网页应用时非常实用。在实际项目中,...
题目中问题一拆为二: 1.文字在超出长度时,如何实现用省略号代替? 2.超长长度的文字在省略显示后,如何在鼠标悬停时,以悬浮框的形式显示出全部信息?...注意:设置宽度,overflow:hidden, white-space:nowrap, te
标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性,它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,...
在JavaScript中,DOM提供了多种获取元素尺寸和位置的方法,这对于进行页面布局、动画效果或者事件处理时非常有用。下面我们将详细探讨这些知识点: 1. **可见区域尺寸**: - `document.body.clientWidth` 和 `...