JS/jQuery宽高的理解和应用

1.widows:窗口、window对象可省略

2.document对象是window对象的一部分

浏览器的Html文档成为Document对象

window.location===document.location

window.innerHeight

.outerHeight

.innerWidth

.outerWidth

用户屏幕

window.screen.height

时间: 2024-12-30 12:31:42

JS/jQuery宽高的理解和应用的相关文章

js各种宽高的理解

1.window.innerHeight.window.outerHeight  窗口的外层的高度/内层高度 2.window.innerWidth/window.outerWidth  窗口的外层的宽度/内层宽度 3.window.screen包含有关用户屏幕的信息 window.screen.width window.screen.height window.screen.availWidth(可视化的宽度) window.screen.availHeight(可视化的高度) window.

js/jq宽高的理解与运用

document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftdocument.body.clientTop 2. 与offset相关的宽高 3. 与scroll相关的宽高 网页滚动到顶部或底部: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

JS和jQuery宽高详解(上篇)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } span.s2 { font: 12.0px Helvetica } ol.o

JS和jQuery宽高详解(中篇)

JS实例练习 首先了解一下document.documentElement与document.body之间的小区别,这两一个元素后者是前者的子集,也就是父子关系. 1)可视区域计算 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.5px "Trebuchet MS" } span.s1 { } 实现原理:div元素到窗口顶部的高度小于窗口的可视高度,则执行对div绑定的函数. 这里获取div元素

JS和jQuery宽高详解(下篇)

jQuery相关的宽高 和JS相比,jQuery就像亲妈一样,JS就是后妈,哈哈哈哈哈------总之,jQuery对很多有关兼容的问题进行封装,只有极少一部分属性需要考虑兼容,用起来非常滴方便-- 与jQuery相关的宽高: .width()与.height(): .innerWidth()与 .innerHeight(); .outerWidth() 与.outerHeight(); 上边3对是jQuery里宽高相关的属性:下边3对是与宽高相关的属性. .scrollTop() 与.scro

js各种宽高(1)

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高 document.body.clientHeight 2.有效的高,屏幕可视的高 document.documentElement.clientHeight 3.屏幕的总高度 document.documentElement.scrollHeight 4.滚动的高度 document.documentElement.scrollTop js代码 <script>// 获取有效的宽和高,屏幕可视的宽 高 var winX = document.documentE

关于html中的设置body宽高的理解

有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效果了,没错! 接着,我们向body里面加个div,给背景设为白色,然后居中,并且不给div宽度.代码如下: 效果图上: 很显然,body的实际宽度是和子类div中的宽度一样的,那为什么body的背景是覆盖整个页面呢?这是别人的猜想: 于是乎,我们上代码: 效果图上: 果然 因此我们得出一些结论:默认

JS处理图片宽高

JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一步进入这个过程. 一.简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.