style.height 获取的是行间的样式

currentStyle.height、getComputedStyle(elem,null).height 获取的是 div 的 content 的宽高,

clientHeight 获取的是 content+padding,

offsetHeight 获取的是content+padding+border。

<script>
window.onload = function(){
var div1 = document.getElementById('div1');
var prop = '';
if(div1.currentStyle){
// IE浏览器下获取行间或样式表样式
prop = div1.currentStyle.height;
}else if(window.getComputedStyle){
// 标准浏览器下获取计算样式,两种写法都可以
// prop = document.defaultView.getComputedStyle(div1,null).height;
prop = window.getComputedStyle(div1,null).height;
}
console.log(prop);
// height:auto; ==》 IE返回的是auto,标准浏览器返回的是实际值
}
</script>

currentStyle、getComputedStyle 获取样式的更多相关文章

  1. style.attr,currentStyle,getComputedStyle获取元素css

    老朋友object.style.attr 平常我们都是使用object.style.attr的方式来获取元素的属性, 但是这种方法具有很大的局限性——只能获取内联样式, 而下面的两种方法可以获取到元素 ...

  2. currentStyle&getComputedStyle获取属性

    方法如下: function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // IE 中的方法 } ...

  3. JS之获取样式

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. getComputedStyle与currentStyle获取样式(style/class)

    今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...

  5. getComputedStyle与currentStyle获取样式

    转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...

  6. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  7. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  8. 利用原生JavaScript获取样式的方式小结

    来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...

  9. style currentStyle getComputedStyle的区别和用法

    先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...

随机推荐

  1. button的onclick函数一直刷新

    button中的onclick写成函数时需要 <button onclick="return function();"></button> 加一个retur ...

  2. NET分页实现及代码

    最近在写一个关于NET的框架,写到后面果不其然的就遇到了分页,自己看了很多关于分页的并自己结合写了一个,晒出来和大家分享一下,第一次写博客望大家多多提意见啦... cs文件分页代码: Paging p ...

  3. C#多线程学习(四) 多线程的自动管理(线程池)

    在多线程的程序中,经常会出现两种情况: 一种情况:   应用程序中,线程把大部分的时间花费在等待状态,等待某个事件发生,然后才能给予响应                   这一般使用ThreadPo ...

  4. 百万数据测试 Entity Framework 到底有多慢

    测试环境 硬件:阿里云乞丐配置 操作系统:Centos 7 CPU: 1核 内存:1 GB (I/O优化) 网络:1Mbps(峰值) 软件 .net core 2.0 ZKEACMS For .net ...

  5. GridView中文属性

    GridControl的中文属性: 1  Appearance 外观 Appearance 外观设置 ColumnFilterButton  行过滤器按钮 BackerColor  背景色 Backe ...

  6. Elasticsearch学习(2) windows环境下Elasticsearch同步mysql数据库

    在上一章中,我们已经能够通过spring boot来使用Elasticsearch,但是由于我们习惯性的将数据写入mysql,所以为了解决这个问题,Elasticsearch为我们提供了一个插件log ...

  7. “全栈2019”Java第十八章:一元运算符

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  8. [To Selina] 《撒野》读后感

  9. [Swift]复数的表示和四则运算

    我们把形如z=a+bi(a,b均为实数)的数称为复数,其中a称为实部,b称为虚部,i称为虚数单位. 当虚部等于零时,这个复数可以视为实数:当z的虚部不等于零时,实部等于零时,常称z为纯虚数. 复数域是 ...

  10. 现代 JavaScript 框架存在的主要原因

    简评:现代 JavaScript 框架的出现最主要是解决哪个问题?这篇文章很好的解释了这个问题. 我见过许多人盲目地使用像 React,Angular 或 Vue.js 这样的现代框架.这些框架提供了 ...