计算HTMLElement尺寸的一些属性和方法

Properties:

clientHeight: 返回元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、边框和外边距。

clientWidth: 表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有的话)、边框和外边距。

clientTop: 一个元素顶部边框的宽度(以像素表示)。不包含顶部外边距或内边距。clientTop是只读的。

clientLeft: 表示一个元素的左边框的宽度,以像素表示。如果元素的文本方向是从右向左(RTL, right-to-left),并且由于内容溢出导致左边出现了一个垂直滚动条,则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

scrollHeight: 计量元素内容高度的只读属性,包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的margin.

scrollWidth: 元素的scrollWidth只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域(例如,元素存在滚动条时), scrollWidth的值要大于clientWidth。

scrollTop: 设置或者获取一个元素距离他容器顶部的像素距离。一个元素的 scrollTop 是可以去计算出这个元素距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

scrollLeft: 读取或设置元素滚动条到元素左边的距离。

时间: 2024-09-29 01:55:47

计算HTMLElement尺寸的一些属性和方法的相关文章

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

计算属性和方法

计算属性 computed:{ } 方法 methods: { } 两者功能上差不多,计算属性是基于依赖缓存的,而methods只要页面重新渲染就会变 想做缓存就用计算属性 原文地址:https://www.cnblogs.com/eunuch/p/9812478.html

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

vue_computed计算属性_methods方法_watch监听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <bod

Swift语言中的属性,方法,下标脚本以及继承

从这篇章节起,Swift编程语言指南大部分的重要内容在于概念,代码并不是太多.理解Swift的面向对象理念,语法以及类结构,构造析构过程对于很好的应用Swift语言将会有比较大的帮助. 属性 存储属性 存储属性通常是那些可以通过直接赋值,或者直接访问成员能够获得的属性类型. 它有些要注意的地方: 若一个结构体被声明为常量,则子属性无法被修改了.在Objective-C中,我们总是无法修改结构体的子属性,但是swift却可以,不过这种情况是个例外,当你存储型属性是个结构体并且是个常量,那你就不要再

修改Chem 3D模型的化学键属性的方法有哪些

很多的用户在绘制化学图形过程中发现很多的图形都是立体结构的,这个时候就需要用Chem3D,它是ChemOffice的核心组件之一,在绘制立体模型和计算化学数据方面具有不可替代的作用.虽然ChemDraw化学绘图工具非常的好用,但是很多的用户对其一些用法不是很了解,下面就来给大家分享一下修改Chem 3D模型的化学键属性的方法有哪些? 如果用户只想修改Chem3D模型的原子属性只需要在特定原子上右击即可,如果想修改化学键属性,在任意化学键上右击鼠标,该化学键两端的原子也自动被选中(呈黄色),此时弹

通过boundingRectWithSize:options:attributes:context:计算文本尺寸

转:http://blog.csdn.net/jymn_chen/article/details/10949279 之前用Text Kit写Reader的时候,在分页时要计算一段文本的尺寸大小,之前使用了NSString类的sizeWithFont:constrainedToSize:lineBreakMode:方法,但是该方法已经被iOS7 Deprecated了,而iOS7新出了一个boudingRectWithSize:options:attributes:context方法来代替: 很碍

Swift的属性,方法,下标脚本以及继承

从这篇章节起,Swift编程语言指南大部分的重要内容在于概念,代码并非太多.理解Swift的面向对象理念,语法以及类结构,构造析构过程对于非常好的应用Swift语言将会有比較大的帮助. 属性 存储属性 存储属性一般是那些可以通过直接赋值,或者直接訪问成员可以获得的属性类型. 它有些要注意的地方: 若一个结构体被声明为常量,则子属性无法被改动了.在Objective-C中,我们总是无法改动结构体的子属性,可是swift却能够,只是这样的情况是个例外,当你存储型属性是个结构体而且是个常量,那你就不要

BOM属性对象方法

本文原链接:https://cloud.tencent.com/developer/article/1018747 BOM 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准.所以,BOM本身是没有标准的或者还没有哪个组织去标准它. 一.window对象 BOM的核心对象是window,它表示浏览器的一个实例.windo