offsetWidth与offsetHeight
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的(译者注：各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。
offsetHeight属性与offsetWidth类似。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width' />
<style>
html,
body {
margin: 0;
padding: 0;
height: 1000px; } #div1{
width:200px;
height:200px;
background-color:purple; }
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
setInterval(function(){
oDiv.style.width=oDiv.offsetWidth-1+'px';
},30)
}
</script>
</head> <body>
<div id='div1'></div> </body> </html>
div增加一段border样式后：
border:1px solid black;
刷新页面：
offsetWidth与offsetHeight的更多相关文章
- javascript 中 offsetWidth,clientWidth;offsetHeight,clientHeight的区别
javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 clientWidth.offsetWidth.clientHeight区别IE6.0.FF ...
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
- JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight的用法
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- offsetWidth，offsetHeight到底该如何理解？
1.对象的可见宽度(对象指body.div等) 2.offsetWidth可以返回div的宽 3.offsetWidth=width+padding+border(不包括margin外边距) 4.返回 ...
- offsetTop offsetLeft offsetWidth offsetHeight
document // Html 的容器对象. document.documentElement //html 对象 document.body // body 对象 $(document.docum ...
- 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth
深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...
随机推荐
- 多测师讲解RF自动化测试实现流程_高级讲师肖sir
1.环境搭建过程?整套环境需要哪些工具包,以及工具包的作用?因为我搭建的RF框架是基于Python的,所以肯定要先安装Python,python安装完之后,开始安装自动化测试框架rf3.0-在do ...
- day25 Pyhton学习 MD5加密.日志
一.MD5加密 MD5是一种不可逆的加密算法. 它是可靠的. 并且安全的. 在python中我们不需要手写这一套算法. 只需要引入一个叫hashlib的模块就能搞定MD5的加密工作 import ha ...
- 为什么大部分的程序员学编程，都会选择从C语言开始？
软件行业经过几十年的发展,编程语言的种类已经越来越多了,而且很多新的编程语言已经在这个领域从开始的默默无闻到如今风风火火,整个编程语言朝着集成化方向发展,这样会导致很多的初学者选择上不像以前那么单一了 ...
- centos8:linux平台查看线程(ps/pstree/top)
一,ps/pstree/top命令所属的rpm包 pstree所属的包 [root@blog ~]# whereis pstree pstree: /usr/bin/pstree /usr/bin/p ...
- swoole创建进程
<?php /** * Created by PhpStorm. * User: mac * Date: 2020/4/23 * Time: 21:57 */ use Swoole\Proces ...
- Python虚拟环境操作
1.安装pip install virtualenvwrapperpip install virtualenvwrapper-win #Windows使用该命令 2.创建一个文件夹,用来保存虚拟环境目 ...
- Spring源码解析之基础应用（三）
组合Java配置 在XML中,我们可以使用<import/>标签,在一个XML文件中引入另一个XML文件,在Java类中,我们同样可以在一个配置类中用@Import引入另一个配置类,被引入 ...
- Helium文档7-WebUI自动化-highlight高亮显示元素
前言 highlight方法是通过红框高亮显示元素,在调试中有很大优势,可以清楚看到定位的元素位置 入参介绍 def highlight(element): """ ...
- Zotero导入Markdown here插件
1. 下载Markdown Here源码包 网址:https://github.com/adam-p/markdown-here 2. 创建.xpi后缀文件 将文件夹 中的这几个文件放入同一个文件夹中 ...
- LoadRunner11web压力测试录制、回放、负载前的准备
以前都是利用LoadRunner进行接口测试.自动化测试.压力测试.最近要对web系统做录制压测,因此花费了很长时间来研究这方面的工作.以下是我web端录制.压测过程的流程以及遇到的坑. 一.启动Vi ...