宽度和高度

对于编写css代码时,宽度和高度就是width和height

但是在JavaScript中,还有其他的宽度和高度,比如offsetWidth,offsetHeight,clientX,clientY,clientWidth,clientHieght,pageX,pageY,scrollWidth,scrollHeight等等这些,用的地方很多,但很少明白它们之间的区别,以及它们主要用在什么地方。

下面我将详细地说明它们具体是做什么的,以及它们之间的区别。

width:设置元素的宽度,定义元素内容区域的宽度。另外,width设置100%和auto是有区别的。

设置为100%,是不包含margin-left和margin-right属性值的;

设置为auto,是包含margin-left和margin-right属性值的。width:auto;总是占据整行的。

height:设置元素的高度,定义元素内容区域的高度。另外,增加内边距,边框,外边距不会影响内容区域的尺寸,但会影响元素框的尺寸。

offsetWidth:(width+padding+border)对象整体的实际宽度,包含滚动条,会随对象的显示大小而变化

offsetHeight:(height+padding+border)当前对象的实际高度

clientWidth:对象的内容可视区域,不包括滚动条会随着对象的显示大小而变化

clientHeight:对象可见内容的高度,不包含滚动条,不包含边框

scrollWidth:对象实际内容的宽度,不包含边线,会随着对象的内容区域超过可视区后而变大

scrollHeight:对象的滚动宽度,不包含滚动条,不包含边框

IE6.0

clientWidth = width + padding

clientHeight = height +padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

情况1:

元素无内容或内容不超过可视区,滚动不出现或不可用的情况下,

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2:

元素的内容超过可视区域,滚动条出现和可用的情况下。

scrollWidth>clientWidth,scrollWidth为实际内容的宽度,clientWidth是内容可视区域的宽度,offsetWidth是元素的实际宽度。

pageX:页面坐标的位置,属性表示鼠标光标在页面中的位置,因此坐标是从页面本身而非视口的左边和定边计算的。

pageY:页面的垂直坐标位置

在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等。

IE8及之前的版本不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)和document.documentElement(标准模式)的scrollLeft和scrollTop属性。

clientX:事件属性返回当前事件被触发时鼠标指针指向对于浏览器页面的水平坐标,它们的值表示事件发生时鼠标指针

clientY:事件属性返回当前事件被触发时鼠标指针指向对于浏览器页面的垂直坐标

javascript 宽度和高度的更多相关文章

  1. JavaScript获取屏幕和页面的宽度和高度

    JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  3. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  4. jquery尺寸:宽度与高度

    width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). innerWidth() 方法返回元素的宽度(包括 ...

  5. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  6. 设定网页最小最大宽度和高度(兼容IE6)

    http://www.cnblogs.com/double-bin/archive/2011/12/19/2293093.html /* 最小寬度 */ .min_width{min-width:30 ...

  7. php获取设备的宽度和高度

    php获取设备的宽度和高度 如果前台没有传输当前请求的宽度和高度,我们有时候需要用php借助javascript获取屏幕的宽和高,以控制现实的样式. 代码如下: <?php /* * 获取设备宽 ...

  8. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  9. 如何改变span元素的宽度与高度

    内联元素:也称为行内元素,当多个行内元素连续排列时,他们会显示在一行里面. 内联元素的特性:本身是无法设置宽度和高度属性的,但是可以通过CSS样式来控制,达到我们想要的宽度和高度. span举例1: ...

随机推荐

  1. 【weex】h5weex-example

    这个就是一个练手的基础性的demo,不过也是有很多值得学习的东西的 效果如下 项目地址为:https://github.com/h5weex/h5weex-example 可能是我找到的项目比较少,很 ...

  2. Django项目:CRM(客户关系管理系统)--02--01PerfectCRM基本配置ADMIN02

    三.CRM项目表结构设计 from django.db import models # Create your models here. """ #运行 Terminal ...

  3. truncate 、delete、drop的区别

    TRUNCATE TABLE 在功能上与不带 Where 子句的 Delete 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 Delete 速度快,且使用的系统和事务日志资源 ...

  4. 高维护性的javascript

    养成良好的编码习惯,提高代码的可维护性 避免定义全局变量或函数 定义全局的变量和函数,会影响代码的可维护性.如果在页面中运行的javascript 代码是在相同的作用域里面,那就可能代码之间存在互相影 ...

  5. DirectX11笔记(三)--Direct3D初始化2

    原文:DirectX11笔记(三)--Direct3D初始化2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article/ ...

  6. 洛谷P1929 迷之阶梯

    P1929 迷之阶梯 题目描述 在经过地球防卫小队的数学家连续多日的工作后,外星人发的密码终于得以破解.它 告诉我们在地球某一处的古老遗迹中,存在有对抗这次灾难的秘密武器.防卫小队立即赶 到这处遗迹. ...

  7. Leetcode709.To Lower Case转换成小写字母

    实现函数 ToLowerCase(),该函数接收一个字符串参数 str,并将该字符串中的大写字母转换成小写字母,之后返回新的字符串. 示例 1: 输入: "Hello" 输出: & ...

  8. thinkphp---display与fetch区别

    区别: ① display方法直接输出模板文件渲染后的内容,fetch方法是返回模板文件渲染后的内容 ② 有时候我们不想直接输出模板内容,而是希望对内容再进行一些处理后输出, 就可以使用fetch方法 ...

  9. CentOS8.0-1905安装配置ftp服务器

    关键词:CentOS8/RHEL8;安装配置FTP/安装配置VSFTPD;被动模式/PASV##CentOS8.0-1905发布后,尝试将FTP服务器迁移至新版本的CentOS中,但是测试过程中,在防 ...

  10. <> 是不等号的意思

    <> 是不等号的意思,也有的语言可以写作:#  或者 != 1.=表示 等于: 2.<> 表示不等于:(注释:在 SQL 的一些版本中,该操作符可被写成 !=): 3.> ...