封装

	  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. jquery easyui教程[申明：来源于网络]

    jquery easyui教程[申明:来源于网络] 地址:http://wenku.baidu.com/view/570e4d4533687e21af45a941.html

  2. vue基本语法

    使用"{{ }}"来插入文本 使用v-html来插入html元素 v-bind给元素绑定属性,例如下面的,将title属性指定为data.title相同的值.v-bind指令后面的 ...

  3. python摸爬滚打之day20--多继承,MRO和C3算法

    1.新式类和经典类 在python2.2之前, 基类如果不写(), 则表示为经典类; 在python2.2之后, 经典类不复存在, 只存在新式类. 如果基类谁都不继承的话, 则默认继承object. ...

  4. Python3下载图片的方法

    1 第一种 from urllib import request request.urlretrieve(s, './图片1.jpg') # 第一种 # s是图片的网络地址,./图片1.jpg,是图片 ...

  5. 如何将本地大文件通过终端上传到linux服务器

    第一种方式:  SecureCRT下   上传文件只需在shell终端仿真器中输入命令“rz”,即可从弹出的对话框中选择本地磁盘上的文件,利用Zmodem上传到服务器当前路径下.   下载文件只需在s ...

  6. 关于矩阵快速幂的用法总结QwQ

    umm首先矩阵快速幂的板子就不港了比较简单的还是?就结合二进制地理解一下就好了,代码可以翻蒟蒻の考前续命这里面放了我记得? 主要是说下应用趴? 目前我会的似乎就是个矩阵加速?简单来说就是个给一个递推式 ...

  7. 洛谷P4396 作业 [AHOI2013] 莫队

    正解:莫队 解题报告: 传送门! 天呐太久没做莫队了连板子都认不出来了,,,所以复健下做下莫队的题目QAQ 就很板子鸭,和莫队板子比好像只有一个离散化,,,?就不讲了QAQ 等下直接放代码QAQ ov ...

  8. docker+httpd的安装

    docker pull docker.io/httpd //直接这么运行会报“没有conf/httpd.cong这个文件” docker run -d --name httpd2. -p : -p : ...

  9. Oracle 26表空间的管理

    一．查看用户表空间 熟悉与表空间相关的数据字典 查看用户的表空间 相关的数据字典:(用于查询数据库信息的数据库表)dba_tablespaces (管理员级别的表空间的描述信息) User_table ...

  10. ZooKeeper是什么

    ZooKeeper概念 相信大家对 ZooKeeper 应该不算陌生,但是你真的了解 ZooKeeper 是什么吗?如果别人/面试官让你讲讲 ZooKeeper 是什么,你能回答到哪个地步呢? 本人曾 ...