<JavaScript>尺寸类样式的获取
尺寸类样式的获取
offsetHeight
HTMLElement.offsetHeight
是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。(content+padding+border)通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。
对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。
如果元素被隐藏(例如 元素或者元素的祖先之一的元素的style.display被设置为none),则返回0
语法
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
实例
var hei = obox.offsetHeight;//返回一个整数数值
上面的图片中显示了scollbar和窗口高度的offsetHeight.但是不能滚动的元素可能会有一个很大的高度值,大于可以看见的内容。这些元素原则上是被包含在滚动元素之中的。所以,这些不能滚动的元素可能会因为scrollTop的值会被完全隐藏或者部分隐藏;
offsetWidth
HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。
content+padding+border
语法
var offsetWidth =element.offsetWidth;
这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用
element.getBoundingClientRect()
分类
假如元素无padding无滚动无border
offsetWidth = clientWidth = style.width
假如元素有padding无滚动有border
offsetWidth = style.width + style.padding*2 + border宽度*2
假如元素有padding有滚动,有border,且滚动是显示的
offsetWidth = style.width + style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
offsetHeight同理
实例
var wid = obox.offsetWidth;//返回一个整数数值
clientWidth
clientWeight是一个只读属性。尺寸范围为:padding+content
内联元素以及没有 CSS 样式的元素的
**clientWidth**
属性值为 0。**Element.clientWidth**
属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。
语法
var intElemClientWidth = element.clientWidth;
//intElemClientWidth 是一个整数,表示元素的 clientWidth。
分类
假如元素无padding无滚动
clientWidth = style.width
假如元素有padding无滚动
clientWidth = style.width + style.padding*2
假如元素有padding有滚动,且滚动是显示的
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientHeight同理
实例
var cw = obox.clientWidth;//返回一个整数数值
clientHeight
clientHeight是一个只读属性。尺寸范围为:padding+content
语法
var intElemClientHeight = element.clientHeight;
//intElemClientHeight 是一个整数,表示元素的 clientHeight。
实例
var ch = obox.clientHeight;//返回一个整数数值
offsetTop
HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其
offsetParent
元素的顶部内边距的距离。相对于页面或包含块偏移的位置
语法
topPos = element.offsetTop;
实例
var d = document.getElementById("div1");
var topPos = d.offsetTop; if (topPos > 10) {
// div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
}
offsetLeft
HTMLElement.offsetLeft 为只读属性,它返回当前元素相对于其
offsetParent
元素的左边内边距的距离。相对于页面或包含块偏移的位置
语法
leftPos = element.offsetLeft;
实例
var d = document.getElementById("div1");
var topLeft = d.offsetLeft; if (topLeft > 10) {
// div1 距离它的 offsetParent 元素的顶部的距离大于 10 px
}
以上属性只能获取不能设置
scrollTop
Element.scrollTop
属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的
scrollTop
值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的scrollTop 值为0。
语法
// 获得滚动的像素数
var intElemScrollTop = someElement.scrollTop; // 设置滚动的距离
element.scrollTop = intValue;
实例
document.onclick = function(){
// console.log(obox.scrollTop);
obox.scrollTop = 666;
}
scrolLeft
Element.scrollLeft
属性可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向(
direction
) 是rtl
(right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且scrollLeft值为0。此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器中不存在)。
语法
//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft; //设置滚动条滚动了多少像素
element.scrollLeft = 10;
scrollLeft
可以是任意整数,然而:- 如果元素不能滚动(比如:元素没有溢出),那么
scrollLeft
的值是0。 - 如果给
scrollLeft
设置的值小于0,那么scrollLeft
的值将变为0。 - 如果给
scrollLeft
设置的值大于元素内容最大宽度,那么scrollLeft
的值将被设为元素最大宽度。
- 如果元素不能滚动(比如:元素没有溢出),那么
实例
document.onclick = function(){
// console.log(obox.scrollLeft);
obox.scrollLeft = 666;
}
<JavaScript>尺寸类样式的获取的更多相关文章
- js中尺寸类样式
js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:e ...
- day26—JavaScript对CSS样式的获取和修改实践
转行学开发,代码100天——2018-04-11 通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能.对于CSS样式通常有行内样式,外部样式,内嵌样式之分. 如: 行内样式: ...
- JavaScript的DOM_通过计算后样式来获取
虽然可以通过 style 来获取单一值的 CSS 样式,但对于复合值的样式信息,就需要通过计算样式来获取. DOM2 级样式,window 对象下提供了 getComputedStyle()方法.接受 ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- jQuery对标签、类样式、值、文档、DOM对象的操作
jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...
- jQuery----操作类样式(依托开关灯案例)
在网页开发中,元素的样式可以在style标签中定义,但是有很多案例需要添加类样式或者删除类样式,可以获取元素调用css()方法改变元素样式,但是这种方法很繁杂,本文利用开关灯案例,小结使用jquery ...
- 浅谈Supermap iClient for JavaScript 弹窗类
地图作为信息的载体和呈现方式,是GIS的重要组成部分,它是一个浏览信息的窗口,在信息日益发达的今天 ,各种地图应用如雨后春笋一般出现在大众眼前,而不是像以往一样太过局限于专业的领域.而弹窗,是作为地图 ...
- Win32编程:窗口类样式+窗口外观样式+窗口显示样式
1.窗口类样式WNDCLASS.style CS_VREDRAW 提供窗口位置变化事件和高度变化事件的处理程序,功能是重绘窗口 CS_HREDRAW 提供窗口位置变化事件和宽度变化事件的处理程序,功能 ...
随机推荐
- KVM虚拟机的管理
1. 查看KVM虚拟机配置文件及运行状态 (1) KVM虚拟机默认配置文件位置: /etc/libvirt/qemu/ autostart目录是配置kvm虚拟机开机自启动目录 (2) virsh命令 ...
- Windows server 2012 利用ntdsutil工具实现AD角色转移及删除域控方法
场景1:主域控制器与辅助域控制器运行正常,相互间可以实现AD复制功能.需要把辅助域控制器提升为主域控制器 ,把主域控制器降级为普通成员服务器:这种场景一般应用到原主域控制器进行系统升级(先转移域角色, ...
- CentOS7下编译安装Python3.7.x【亲测有效】
所有操作都在root用户下操作 下载安装包 编译安装 建立软链接 验证 安装: 更新yum: yum update 安装Python依赖: yum install openssl-devel bzip ...
- 请求类型 GET 和 POST 的区别
一.GET 一个简单的 GET 请求: xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send(); 在上面 ...
- java容器一:Collection概述
Collection概览 java容器有两类,第一类是Collection,存储的是对象的集合:第二类是Map,存储的是键值对(两个对象以及它们之间的对应关系)的集合 Collection接口下面有三 ...
- 2星|项立刚《5G时代》:资料堆砌和一些假想设想,信息浓度太低
“ 这是一本关于5G的书,但着眼点不是要说清楚5G的技术,因为解读5G技术的图书已经有很多,我自己也不是技术专家.本书是希望探讨在一个全新的网络体系下产业的发展与改变,以及5G对社会与经济的影响.P6 ...
- 批量清理harbor镜像
#! /bin/bash # 通过Harbor提供的API来批量删除镜像,人工删除费时费力 # 经过测试发现,通过接口去删除时提供的是的标签,但实际上删除的时候通过的是镜像的IMAGE_ID,也就是说 ...
- Greenplum最佳实践
一.最佳实践数据库参数部分 GP数据库参数配置 以下配置存于文件–postgresql.conf中,仅列出一些最常用的参数. shared_buffers:刚开始可以设置一个较小的值,比如总内存的15 ...
- 学生管理系统——数据库、java基础
1.项目分层 view层:视图层 controller层:控制层 service层:业务层 dao层:数据库访问层 domain:实体包 tools:工具类 2.jar包 3.配置文件 4.程序设计 ...
- loj #136
最小瓶颈路 做最小生成树是进行特判即可 时间复杂度 n * k #include <bits/stdc++.h> const int N = 1010, M = 1e5 + 10; str ...