`
20386053
  • 浏览: 461904 次
文章分类
社区版块
存档分类
最新评论

JS取各种尺寸的方法

 
阅读更多

JS取浏览器和网页可见区高和宽

<SCRIPT LANGUAGE="JavaScript">
var s = "网页可见区域宽:"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>

普通DOM子元素的宽高获取:

document.getElementById("元素id名称").style.width

document.getElementById("元素id名称").style.height

在表格及其元素的CSS宽高获取上的浏览器兼容问题:

  对TABLE进行border-collapse:collapse;设定,对TR和TD进行display:block;设定,这时再去获取任意元素的宽高,各浏览器都会是一致的。如果不这样设置,则各种浏览器获取结果可能有差异。

分享到:
评论

相关推荐

    易语言脚本组件FileSystemObject取文件目录尺寸源码.rar

    `取目录尺寸源码.e`可能是这个易语言程序的源代码文件,包含了上述逻辑。如果你想要使用这个源码,需要将其解压并用易语言编译器打开,然后根据自己的需求修改目录路径。 在实际应用中,这个功能可以用于监控磁盘...

    javascript实现加载各种尺寸图片自适应同一尺寸容器,切不变形

    总结来说,通过JavaScript结合适当的CSS,我们可以确保不同尺寸的图片在统一尺寸的容器中展示时保持比例,适应各种主流浏览器。这个过程涉及到DOM操作、事件监听以及尺寸计算,是前端开发中常见且实用的技术点。

    js网页取色器

    7. **响应式设计**:考虑到不同的设备和屏幕尺寸,一个良好的网页取色器应该具备响应式设计,能够适应各种屏幕大小。这需要利用到CSS3的媒体查询和JavaScript的适配逻辑。 8. **性能优化**:为了保证用户体验,网页...

    纯JavaScript实现的网页取色器

    纯JavaScript实现的网页取色器则不依赖任何外部库,完全通过JavaScript代码来完成这一功能。 要实现一个纯JavaScript的网页取色器,首先需要理解颜色选取的基本原理。通常,颜色选取会涉及鼠标事件,当用户在页面上...

    js获取浏览器高度和宽度值(多浏览器)

    在JavaScript中,获取浏览器的高度和宽度是常见的需求,特别是在页面...通过结合使用这些方法,开发者可以创建适应各种屏幕尺寸和设备的网页。在实际项目中,确保代码能够处理各种浏览器和设备,以提供良好的用户体验。

    扩展JavaScript功能的正确方法(译文)

    这个方法首先使用split()方法根据'px'将字符串分割成数组,然后取数组的第一个元素用parseInt()转换为数字。这个方法很有用,因为Web前端开发中经常需要处理以像素为单位的尺寸值。 String.isHex()方法用于判断一个...

    html网页扒取工具(html,css,js,img)

    HTML网页扒取工具是一种高效的方法,用于批量获取网页上的HTML、CSS、JavaScript和图像资源,大大简化了网页内容的下载和存储过程。这种工具对于网页设计师、开发者、数据抓取人员以及想要离线查看网页内容的用户来...

    js获取 input file 图片立即显示

    - 图片压缩:如果用户上传大尺寸图片,可以考虑使用JavaScript库(如`jpeg-js`或`canvas`)进行图片压缩,减少服务器压力。 6. **额外功能**: - 图片旋转:使用`canvas` API,可以在预览时提供图片旋转功能。 -...

    原生js构建颜色选择器取色器

    7. **响应式设计**:为了确保取色器在不同设备和屏幕尺寸上的良好显示,可以使用媒体查询和CSS Flexbox或Grid布局实现响应式布局。 8. **优化与兼容性**:原生JS开发需要注意浏览器兼容性问题,尤其是老版本的IE。...

    javascript获取窗口属性值

    其中一项常见需求是获取浏览器窗口的各种属性值,比如宽度、高度等,这对于响应式设计或某些特定功能(如弹窗位置计算)非常有用。 #### 一、主要窗口属性 在提供的代码示例中,通过`getInfo`函数展示了如何获取一...

    200个JS技巧代码

    标题中的“200个JS技巧代码”表明这是一个关于JavaScript编程的集合,包含了各种实用的技巧和实例。描述中提到的“JS实例代码”进一步强调了这些技巧是通过实际的JavaScript代码来展示的,旨在帮助开发者提升在...

    javascript实现显示和隐藏div方法汇总

    这些方法在不同场景下各有优缺点,选择哪种方式取决于具体需求,例如是否需要保留元素空间、是否涉及动画效果等。在实际应用中,可能还需要考虑浏览器兼容性,确保在各种环境下都能正常工作。通过JavaScript动态绑定...

    纸牌游戏-21点,js源代码

    牌堆的实现通常包括初始化牌堆、洗牌(shuffle)和取牌(deal)等方法。 然后,我们设计玩家(Player)和庄家(Dealer)类。两者都有自己的手牌(hand)属性,以及增加手牌、计算手牌总和、判断是否爆牌(超过21点...

    js图片自动缩放功能

    JavaScript(简称JS)是一种轻量级的脚本语言,常用于网页和网络应用开发,能够对用户界面进行实时更新和交互。在网页中处理图片时,我们常常需要实现图片自动缩放的功能,以便适应不同设备的屏幕尺寸或者保持页面...

    NET仿淘宝动根据颜色尺寸动态加载价格列表

    本项目完全防战淘宝商品价格编辑功能,可修改“颜色”、“尺寸”属性文字,最多添加九个...保存直接js取到所有数据提交到一般处理 程序保存。保存和加载涉及到数据库,所以就不上传了,如若需要,请联系QQ:80473931

    屏幕取色器

    3. CSS:虽然CSS本身并不支持屏幕取色功能,但开发者可以在JavaScript中实现类似功能,然后将颜色值传递给CSS。可以利用HTML5的Canvas API,创建一个与屏幕尺寸相同的Canvas元素,然后遍历每一像素获取颜色。 总的...

    js圆圈进度Javascript

    "js圆圈进度Javascript"这个标题暗示了我们将会讨论如何使用JavaScript来实现一个圆形进度条效果。这种效果常见于展示加载进度、任务完成度或者数据指标等场景。 在不支持IE8及以下版本的浏览器的环境中,我们可以...

    js实现水平垂直居中

    JavaScript(简称JS)作为客户端编程语言,可以灵活地解决这个问题,尤其在需要动态调整或者兼容多种浏览器时。本话题将深入探讨如何使用纯JavaScript实现水平垂直居中的方法。 一、固定宽高的元素居中 对于具有...

    兼容火狐,苹果的Js日期选择-支持多选

    我们可以使用CSS3来创建现代且响应式的布局,确保在各种屏幕尺寸和设备上都能良好显示。 5. **多选逻辑**:实现多选功能需要考虑如何标记已选日期,以及如何限制用户选择的日期范围。这可能涉及到自定义的`click`...

    JavaScript日历控件 六种日历

    这些日历控件可能已经考虑了不同屏幕尺寸和设备的适应性,确保在各种设备上都能良好显示和使用。 10. **可访问性**: - 考虑到网页的无障碍性,好的日历控件应支持键盘导航,允许屏幕阅读器用户也能方便地使用。 ...

Global site tag (gtag.js) - Google Analytics