封装

	  function getStyle(obj , attr){

		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐

	  };

效果如下：

　　

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style>

	*{

		margin: 0;

		padding: 0;

	}

	#box{

		margin: 50px auto;

		width: 300px;

		height: 250px;

		color: #fff;

		background:#70aa39;

		text-align: center;

		line-height: 50px;

	}

  </style>

 </head>

 <body>

	<div id="box"></div>

 <script>

	var oBox = document.getElementById("box"),

		oW = parseFloat(getStyle(oBox , "width")),

		oH = parseFloat(getStyle(oBox , "height"));

		oBox.innerHTML = "宽:"+oW+"px"+"<br/>"+"高:"+oH+"px";

	//封装

	  function getStyle(obj , attr){

		return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; //兼容写法IE:火狐

	  };

  </script>

 </body>

</html>

js获取css样式封装的更多相关文章

  1. js获取css样式方法

    一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: ...

  2. JS获取最终样式

    在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...

  3. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  4. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  5. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  6. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  7. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  8. js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...

  9. js获取css的各种样式并且设置他们

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设 ...

随机推荐

  1. python全栈开发 * 36知识点汇总 * 180721

    36 操作系统的发展史 进程一.手工操作--穿孔卡片 1.内容: 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制 台开关启动程序针对 ...

  2. stm32f7699遇到的犯二问题

    没有看到stlink的驱动,难道板子坏了?? 结果:USB线的问题,换了一根用过的线,就行了:

  3. day12 十二、开放封闭、装饰器

    一.nonlocal关键词 # global # num = # def fn(): # global num # L>G 将局部的名字与全局统一 # num = # fn() # print( ...

  4. Gym 101194E / UVALive 7901 - Ice Cream Tower - [数学+long double][2016 EC-Final Problem E]

    题目链接: http://codeforces.com/gym/101194/attachments https://icpcarchive.ecs.baylor.edu/index.php?opti ...

  5. 客户续费模型 逻辑回归 分类器 AdaBoost

    客户续费模型  逻辑回归 分类器  AdaBoost

  6. qemu对虚拟机的内存管理（一）

    在分析了KVM中对虚拟机各级地址(gva->gpa->hva->hpa)的转换之后,想要知道qemu中又是如何完成各级地址转换的,因此对qemu中对虚拟机内存管理的相关数据结构与源码 ...

  7. zabbix结合grafana打造炫酷监控界面

    一.grafana介绍 grafana是一个开源的数据展示工具, 是一个开箱即用的可视化工具,具有功能齐全的度量仪表盘和图形编辑器,有灵活丰富的图形化选项,可以混合多种风格,支持多个数据源特点. za ...

  8. JQuery插件之【jqGrid】常用语法整理

    jqGrid常用语法整理,包含数据获取.常用函数.触发事件等 jqGrid表格数据获取相关语法 获取表格所有数据 $("#grid").jqGrid("getRowDat ...

  9. python tuple的函数

    1. len(tuple) 计算元组元素个数 >>> tuple1 = ('Google', 'Runoob', 'Taobao') >>> len(tuple1) ...

  10. int 的重载

    测试代码: 结果: 分析: 首先创建两个对象同时进行初始化所以两次调用带参的构造函数: 其次在创建一个 对象然后将其等于前两个对象相加,这里由于该类没有重载+运算符而是重载了int 所以当两个对象相加 ...