HTML标签的offset、client、 scroll和currentStyle属性

offsetHeight = borderTopWidth + clientHeight + scrollbarWidth + borderBottomWidth;

offsetWidth = borderLeftWidth + clientWidth + scrollbarWidth + borderRightWidth;

元素内部实际可用区域(高) = clientHeight - paddingTopWidth - paddingBottomWidth;

元素内部实际可用区域(宽) = clientWidth - paddingLeftWidth - paddingRightWidth;

scrollHeight：文章的实际高度，不管是否已经用纵向滚动条浏览过。

scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过。

scrollTop：用纵向滚动条滚过的高度。

scrollLeft：用横向滚动条滚过的宽度。

文章未滚过部分(高) = scrollHeight - scrollTop - clientHeight;

文章未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth;

offsetTop：如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点y轴之间的差。如果是relative，则是相对于上方或外层元素y轴上的差值。如果是static（position的默认值），则该属性没有意义。

offsetLeft：如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点x轴之间的差。如果是relative，则是相对于上方或外层元素x轴上的差值。如果是static（position的默认值），则该属性没有意义。

clientTop：等同于borderTopWidth。

clientLeft：等同于borderLeftWidth。

currentStyle：

    height：等同于clientHeight。

    width：等同于clientWidth。

    left：等同于offsetLeft。

    top：等同于offsetTop。

    padding：共有4个，可以单独指定，也可以一起指定。该值是指元素border距元素内可用区域之间的距离。

    margin：共有4个，可以单独指定，也可以一起指定。该值是指距相邻/周围元素之间的距离。当元素position为relative时，其4个值分别等同于top、right、bottom和left

js_get_width_height

你可能感兴趣的:(currentStyle)

  • eyoucms 导航调用三级栏目的方法 西祠_fa33
    {eyou:channeltype="top"row="60"id="field"currentstyle="active"}{$field.typename}{eyou:channelname="$field.children"row="100"id="field2"}{$field2.typename}{eyou:channelname="$field2.children"row="100"i
  • haslayout解释和触发 星辰_50e6
    haslayout详解定义haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况HTML标签默认触发hasLayout的有如下HTML标签：【1】htm
  • eyoucms adv 广告列表标签 西祠_fa33
    【基础用法】名称：adv功能：获取广告列表内容。语法：{eyou:advpid='1'row='3'}{/eyou:adv}参数：pid=''广告位置IDrow='10'返回广告列表总数currentstyle=''应用样式class类名orderby='now'文档排序方式orderby='hot'或orderby='click'表示按点击数从高到低排序orderby='now'按发布时间最新排
  • eyoucms 当前栏目如何调用子栏目？ 西祠_fa33
    易优cms在当前栏目下如何调用子栏目呢？下面代码即可实现。调用下级栏目{eyou:channeltype="son"currentstyle="active"}{$field.typename}{/eyou:channel}type="son"son表示下级转自：https://www.eyoucms.com/help/eyoujq/1277.html
  • 28、JavaScript学习笔记——脚本化CSS lvh98 cssjavascript学习
    脚本化CSS文章目录脚本化CSS1.读写元素CSS属性1.1dom.style.prop2.读CSS计算属性2.1window.getComputedStyle(eleDom,伪元素字符串/null)2.2currentStyle2.3封装获取计算属性的函数，解决兼容性问题1.读写元素CSS属性1.1dom.style.prop可读写行间样式，没有兼容性问题。dom.style返回一个CSSSty
  • js 获取元素宽高的几种方法 @小倪同学 javascript前端开发语言
    1、Element.style.width/height只能获取内联样式2、window.getComputedStyle(ele).width/height可获取实时的style3、Element.currentStyle.width/height功能与第二点相同，只存在于旧版本IE中(IE9以下)，除了做旧版IE兼容，就不要用它了。4、Element.getBoundingClientRect
  • 织梦dede:channel指定typeid子栏目调用currentstyle高亮无效的解决教程 阿修哥
    dede:channel指定typeid时currentstyle无效{dede:channeltypeid='12'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}解决方法打开include/taglib/channel.lib.php找到$row['id']==$typeid改成$row['id']==$r
  • 【易优CMS】screening的基础用法 Jessicahuan
    [基础用法]名称：screening功能：筛选文章语法：{eyou:screeningid='field'currentstyle='active'alltxt='不限'}{eyou:volistname='$field.list'id='vo'}{$vo.title}：{eyou:volistname='$vo.dfvalue'id='val'}{$val.name}{/eyou:volist}
  • 获取DIv样式的时候，处理浏览器不同的兼容性问题 MCherish
    functiongetStyle(obj,attr){returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
  • 获取css样式 三人_
    functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr];}}通过这种方式获取css3的transform,结果是一个矩阵
  • js事件中的一些兼容写法总结 秃头成就技术
    事件中兼容还是挺多的，这里稍微总结下，大家还得多看多背才能熟记1.获取行内样式兼容functiongetStyle(ele,attr){if(window.getComputedStyle){//通常方法获取returnwindow.getComputedStyle(ele,false)[attr];}else{//ie兼容returnele.currentStyle[attr];}}2.键盘事件
  • js封装一个缓动动画 璃小灯吖
    js封装一个缓动动画，支持传入json数据格式进行多属性操作。具体全部实现代码如下：1、获取元素css样式属性值的方法/****@对象名称{String}obj*@CSS属性{String}attr*/functiongetStyleAttr(obj,attr){if(obj.currentStyle){//IE和operareturnobj.currentStyle[attr];}else{re
  • vue面试题总结记录(1) 萬wan事顺意
    为了未来几周的面试，忙忙碌碌的总结了这么一些面试题。1.js的兼容问题aevent事件问题：varoEvent=ev||window.event;ev是谷歌火狐的写法，IE9以上支持，往下不支持；event谷歌和IE支持，火狐不支持；b.获取元素的非行间样式：functiongetStyle(object,ocss){if(object.currentstyle){returnobj.curren
  • Mkdocs中利用Js实现大小圈鼠标拖动样式 Wcowin javascript前端
    在docs/javascripts/extra.js下复制粘贴：varCURSOR;Math.lerp=(a,b,n)=>(1-n)*a+n*b;constgetStyle=(el,attr)=>{try{returnwindow.getComputedStyle?window.getComputedStyle(el)[attr]:el.currentStyle[attr];}catch(e){}
  • 取非行间样式 想做一个画家
    Document#div1{width:200px;height:200px;background:red;}//取非行间样式：如果样式没有写在行间，//那么应该利用currentStyle(IE)或者getComputedStyle(obj，false).name。//获取复合样式的属性时需要注明所取的明确样式//如获取背景颜色，需要写backgroundColor，直接写background是
  • 二级导航嵌套调用并高亮 黎明的破晓
    织梦一级菜单被点击栏目高亮调用方法：{dede:channeltypeid='1'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}*注：对当前栏目列表设置了class='on'，可以通过css样式为其设置背景图片或颜色，从而达到栏目高亮的效果。首页判断是否添加class调用方法：网站首页的位置把class的属性
  • js中兼容性问题 三千繁夢
    JS中出现的兼容性问题的总结1.关于获取行外样式currentStyle和getComputedStyle出现的兼容性问题我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:我们一般通过这两个方法获取行外样式：IE下:currentStyleChrome,FF下:getComputedStyle(oDiv,false)兼容两个浏览器的写法:if(oDiv.currentSty
  • getStyleFunction Jadon7
    getStyleFunctionfunctiongetStyle(obj,name){if(obj.currentStyle){returnobj.currentStyle[name];}else{returngetComputedStyle(obj,false)[name];}}window.onload=function(){varoDiv=document.getElementById('d
  • channelartlist标签完美支持currentstyle属性 阿修哥
    channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式，可以用来标识当前栏目位置的CSS，解决方法如下：打开文件include\taglib\channelartlist.lib.php找到：$pv->Fields['typeurl']=GetOneTypeUrlA($typeids[$i]);在此行代码下方增加以下代码：if($typeids[$i]
  • 脚本化css的知识点及方法封装 QJe
    脚本化CSS查询计算样式window.getComputedStyle(ele,null)计算样式只读返回的样式的值为绝对值（px），不是相对值（em，%）IE8及IE8以下不兼容此时的null如果传递值，可传递伪元素，意思为获取该ele的伪元素的样式ele.currentStyle计算样式只读返回的样式值不是经过转换的绝对值IE特有的属性//针对上述两种查询样式方法封装兼容的fun/***[ge
  • js中常见的兼容问题及其解决方法 林llgb
    在编写js的代码时，总会遇到一些兼容问题，下面来总结一些常见的兼容写法：1.获取样式的兼容写法：A.非IE浏览器：getComputedStyle(元素,false).属性名B.IE浏览器：元素.currenStyle.属性名C.兼容的封装写法：正常浏览器和IE8及以下functiongetStyle(element,attribute){if(element.currentStyle){retu
  • JS如何设置盒模型的宽和高 成熟稳重的李先生
    //只能获取内联样式设置的宽高dom.style.width/height//获取渲染后即时运行的宽高，值是准确的。但只支持IEdom.currentStyle.width/height//获取渲染后即时运行的宽高，值是准确的。兼容性更好window.getComputedStyle(dom).width/height;//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对
  • 放烟花效果 升龙无涯
    烟花效果图如下：烟花效果代码如下：工具函数//获取随机颜色的函数functiongetColor(){varcolor='#';for(vari=0;i0?Math.ceil(percent):Math.floor(percent);//让当前的值跟计算好的距离相加currentStyle+=percent;//设置样式ele.style[attr]=currentStyle+'px'//如果移动
  • 来讲一下IE和火狐的不同之处 赋帘楠霓
    （1）获取样式：IE支持currentStyle，Firefox支持getComputedStyle（2）文本：IE用innerText，Firefox用textContent（3）事件：IE用attachEvent，Firefox用addEventListener（4）透明度：IE用filter：alpha（opacity=80），Firefox用opacity：0.8（5）鼠标位置：IE用ev
  • js 运动函数封装函数，涉及 是否匀速、目标值、json参数等 Ares-Wang javascript开发语言ecmascript
    VID_20220713_163005Document#div{height:50px;width:80px;background-color:red;}//获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returnwindow.getComputedStyle(obj,
  • js实现导航栏上下动画效果
    本文实例为大家分享了js实现导航栏上下动画的具体代码，供大家参考，具体内容如下obj.currentStyle[name]与getComputedStyle(obj,false)[name]，一个是支持IE一个支持FE完美运动js插件，能根据传进来的值，进行匹配，从而得到了理想的运动效果，也就是运行逻辑。实现上下动画动画效果就是控制元素height的值，通过不断的修改该值，就能呈现所谓的动画效果，
  • JavaScript style对象与CurrentStyle对象案例详解
    1、Style对象style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。例子：#div{color:gray;}//内部样式//内联样式document.getElementById('id').style.color;//值为red2、currentStyle对象返回所有样式声明（包括内部、外部、内联）按
  • css盒模型 大乔是个美少女
    image.pngw3c的盒模型：宽高只针对content宽高。IE的盒模型：宽高针对的是content+padding+border的宽高。box-sizing:content-boxw3c模型box-sizing:border-boxIE模型js获取：getElementById("aaa").style.width/height【内联】dom.currentStyle.width/heigh
  • 常用函数库 jia林
    //获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle([attr])}else{returngetComputedStyle(obj,false)[attr]}}//事件绑定functionaddEvent(obj,sEv,fn){if(obj.addEventListener){//兼容ie9+F
  • 3-2 CSS盒模型 zhangmz
    1、标准模型2、IE模型3、CSS如何设置这两个模型box-sizing:content-box;//浏览器默认box-sizing:border-box4、JS如何获取盒模型对应的宽和高dom.style.width/height//只能取到内联样式dom.currentStyle.width/height//只有IE支持window.getComputedStyle(dom).width/he
  • Dom 周华华 JavaScripthtml
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • 【Spark九十六】RDD API之combineByKey bit1129 spark
    1. combineByKey函数的运行机制   RDD提供了很多针对元素类型为(K,V)的API，这些API封装在PairRDDFunctions类中，通过Scala隐式转换使用。这些API实现上是借助于combineByKey实现的。combineByKey函数本身也是RDD开放给Spark开发人员使用的API之一   首先看一下combineByKey的方法说明：
  • msyql设置密码报错：ERROR 1372 (HY000): 解决方法详解 daizj mysql设置密码
    MySql给用户设置权限同时指定访问密码时，会提示如下错误： ERROR 1372 (HY000): Password hash should be a 41-digit hexadecimal number；   问题原因：你输入的密码是明文。不允许这么输入。   解决办法：用select password('你想输入的密码');查询出你的密码对应的字符串， 然后
  • 路漫漫其修远兮 吾将上下而求索 周凡杨 学习 思索
    王国维在他的《人间词话》中曾经概括了为学的三种境界古今之成大事业、大学问者，罔不经过三种之境界。“昨夜西风凋碧树。独上高楼，望尽天涯路。”此第一境界也。“衣带渐宽终不悔，为伊消得人憔悴。”此第二境界也。“众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”此第三境界也。学习技术，这也是你必须经历的三种境界。第一层境界是说，学习的路是漫漫的，你必须做好充分的思想准备，如果半途而废还不如不要开始。这里，注
  • Hadoop(二)对话单的操作 朱辉辉33 hadoop
    Debug： 1、 A = LOAD '/user/hue/task.txt' USING PigStorage(' ') AS (col1,col2,col3); DUMP A; //输出结果前几行示例： (>ggsnPDPRecord(21),,) (-->recordType(0),,) (-->networkInitiation(1),,)
  • web报表工具FineReport常用函数的用法总结（日期和时间函数） 老A不折腾 finereport报表工具web开发
    web报表工具FineReport常用函数的用法总结（日期和时间函数）   说明：凡函数中以日期作为参数因子的，其中日期的形式都必须是yy/mm/dd。而且必须用英文环境下双引号(" ")引用。   DATE DATE(year,month,day):返回一个表示某一特定日期的系列数。 Year:代表年，可为一到四位数。 Month:代表月份。
  • c++ 宏定义中的##操作符 墙头上一根草 C++
    #与##在宏定义中的--宏展开 #include <stdio.h> #define f(a,b) a##b #define g(a)   #a #define h(a) g(a) int main() {       &nbs
  • 分析Spring源代码之，DI的实现 aijuans springDI现源代码
    (转) 分析Spring源代码之，DI的实现 2012/1/3 by tony                 接着上次的讲，以下这个sample [java]  view plain copy print
  • for循环的进化 alxw4616 JavaScript
    // for循环的进化 // 菜鸟 for (var i = 0; i < Things.length ; i++) { // Things[i] } // 老鸟 for (var i = 0, len = Things.length; i < len; i++) { // Things[i] } // 大师 for (var i = Things.le
  • 网络编程Socket和ServerSocket简单的使用 百合不是茶 网络编程基础IP地址端口
      网络编程;TCP/IP协议   网络:实现计算机之间的信息共享,数据资源的交换   协议:数据交换需要遵守的一种协议,按照约定的数据格式等写出去   端口:用于计算机之间的通信      每运行一个程序，系统会分配一个编号给该程序，作为和外界交换数据的唯一标识 0~65535   查看被使用的
  • JDK1.5 生产消费者 bijian1013 javathread生产消费者java多线程
    ArrayBlockingQueue：        一个由数组支持的有界阻塞队列。此队列按 FIFO（先进先出）原则对元素进行排序。队列的头部 是在队列中存在时间最长的元素。队列的尾部 是在队列中存在时间最短的元素。新元素插入到队列的尾部，队列检索操作则是从队列头部开始获得元素。 ArrayBlockingQueue的常用方法：
  • JAVA版身份证获取性别、出生日期及年龄 bijian1013 java性别出生日期年龄
            工作中需要根据身份证获取性别、出生日期及年龄，且要还要支持15位长度的身份证号码，网上搜索了一下，经过测试好像多少存在点问题，干脆自已写一个。 CertificateNo.java package com.bijian.study; import java.util.Calendar; import
  • 【Java范型六】范型与枚举 bit1129 java
    首先，枚举类型的定义不能带有类型参数，所以，不能把枚举类型定义为范型枚举类，例如下面的枚举类定义是有编译错的   public enum EnumGenerics<T> { //编译错，提示枚举不能带有范型参数 OK, ERROR; public <T> T get(T type) { return null;
  • 【Nginx五】Nginx常用日志格式含义 bit1129 nginx
    1. log_format 1.1 log_format指令用于指定日志的格式，格式：   log_format name(格式名称) type(格式样式)   1.2 如下是一个常用的Nginx日志格式：   log_format main '[$time_local]|$request_time|$status|$body_bytes
  • Lua 语言 15 分钟快速入门 ronin47 lua 基础
    - - 单行注释 - - [[      [多行注释] - - ]]   - - - - - - - - - - - 1. 变量 & 控制流 - - - - - - - - - - num = 23 - - 数字都是双精度 str = 'aspythonstring'
  • java-35.求一个矩阵中最大的二维矩阵 ( 元素和最大 ) bylijinnan java
    the idea is from: http://blog.csdn.net/zhanxinhang/article/details/6731134 public class MaxSubMatrix { /**see http://blog.csdn.net/zhanxinhang/article/details/6731134 * Q35 求一个矩阵中最大的二维
  • mongoDB文档型数据库特点 开窍的石头 mongoDB文档型数据库特点
    MongoDD: 文档型数据库存储的是Bson文档-->json的二进制 特点：内部是执行引擎是js解释器，把文档转成Bson结构，在查询时转换成js对象。 mongoDB传统型数据库对比    传统类型数据库：结构化数据，定好了表结构后每一个内容符合表结构的。也就是说每一行每一列的数据都是一样的    文档型数据库：不用定好数据结构，
  • [毕业季节]欢迎广大毕业生加入JAVA程序员的行列 comsci java
        一年一度的毕业季来临了。。。。。。。。      正在投简历的学弟学妹们。。。如果觉得学校推荐的单位和公司不适合自己的兴趣和专业，可以考虑来我们软件行业，做一名职业程序员。。。      软件行业的开发工具中，对初学者最友好的就是JAVA语言了，网络上不仅仅有大量的
  • PHP操作Excel – PHPExcel 基本用法详解 cuiyadll PHPExcel
    导出excel属性设置//Include classrequire_once('Classes/PHPExcel.php');require_once('Classes/PHPExcel/Writer/Excel2007.php');$objPHPExcel = new PHPExcel();//Set properties 设置文件属性$objPHPExcel->getProperties
  • IBM Webshpere MQ Client User Issue (MCAUSER) darrenzhu IBMjmsuserMQMCAUSER
    IBM MQ JMS Client去连接远端MQ Server的时候，需要提供User和Password吗？ 答案是根据情况而定，取决于所定义的Channel里面的属性Message channel agent user identifier (MCAUSER)的设置。 http://stackoverflow.com/questions/20209429/how-mca-user-i
  • 网线的接法 dcj3sjt126com
    一、PC连HUB (直连线)A端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 二、PC连PC （交叉线）A端：(568A)： 白绿，绿，白橙，蓝，白蓝，橙，白棕，棕； B端：（标准568B）：白橙，橙，白绿，蓝，白蓝，绿，白棕，棕。 三、HUB连HUB&nb
  • Vimium插件让键盘党像操作Vim一样操作Chrome dcj3sjt126com chromevim
    什么是键盘党？ 键盘党是指尽可能将所有电脑操作用键盘来完成，而不去动鼠标的人。鼠标应该说是新手们的最爱，很直观，指哪点哪，很听话！不过常常使用电脑的人，如果一直使用鼠标的话，手会发酸，因为操作鼠标的时候，手臂不是在一个自然的状态，臂肌会处于绷紧状态。而使用键盘则双手是放松状态，只有手指在动。而且尽量少的从鼠标移动到键盘来回操作，也省不少事。 在chrome里安装 vimium 插件
  • MongoDB查询（2）——数组查询[六] eksliang mongodbMongoDB查询数组
    MongoDB查询数组 转载请出自出处：http://eksliang.iteye.com/blog/2177292 一、概述  MongoDB查询数组与查询标量值是一样的，例如，有一个水果列表，如下所示： > db.food.find() { "_id" : "001", "fruits" : [ "苹
  • cordova读写文件（1） gundumw100 JavaScriptCordova
    使用cordova可以很方便的在手机sdcard中读写文件。 首先需要安装cordova插件：file 命令为： cordova plugin add org.apache.cordova.file 然后就可以读写文件了，这里我先是写入一个文件，具体的JS代码为： var datas=null;//datas need write var directory=&
  • HTML5 FormData 进行文件jquery ajax 上传 到又拍云 ileson jqueryAjaxhtml5FormData
    html5 新东西：FormData  可以提交二进制数据。 页面test.html <!DOCTYPE> <html> <head> <title> formdata file jquery ajax upload</title> </head> <body> <
  • swift appearanceWhenContainedIn:(version1.2 xcode6.4) 啸笑天 version
      swift1.2中没有oc中对应的方法： + (instancetype)appearanceWhenContainedIn:(Class <UIAppearanceContainer>)ContainerClass, ... NS_REQUIRES_NIL_TERMINATION;  解决方法： 在swift项目中新建oc类如下： #import &
  • java实现SMTP邮件服务器 macroli java编程
    电子邮件传递可以由多种协议来实现。目前，在Internet 网上最流行的三种电子邮件协议是SMTP、POP3 和 IMAP，下面分别简单介绍。 　　◆ SMTP 协议 　　简单邮件传输协议(Simple Mail Transfer Protocol,SMTP)是一个运行在TCP/IP之上的协议，用它发送和接收电子邮件。SMTP 服务器在默认端口25上监听。SMTP客户使用一组简单的、基于文本的
  • mongodb group by having where 查询sql qiaolevip 每天进步一点点学习永无止境mongo纵观千象
    SELECT cust_id, SUM(price) as total FROM orders WHERE status = 'A' GROUP BY cust_id HAVING total > 250 db.orders.aggregate( [ { $match: { status: 'A' } }, { $group: {
  • Struts2 Pojo（六） Luob. POJOstrust2
    注意：附件中有完整案例 1.采用POJO对象的方法进行赋值和传值 2.web配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee&q
  • struts2步骤 wuai struts
    1、添加jar包 2、在web.xml中配置过滤器 <filter>        <filter-name>struts2</filter-name>        <filter-class>org.apache.st
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他