封装

	  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. 找不到main

    用eclipse写代码的时候,写了一个简单的程序,编译的时候突然出现“错误: 在类 com.test.demo 中找不到 main 方法, 请将 main 方法定义为: public static v ...

  2. C#Web从0到1—创建一个web并从VS集成的SQLlocalDB数据库中查询数据

    软件说明: VS2017,腾讯云服务器10元1个月,系统Win2012 R2标准版 第一步:建立第一个网页 建立工程 建好后,可以打开View选项打开项目资源浏览器和工具箱,后文会多次用到这两个版面 ...

  3. Java ee第一周的作业

    这学期目标:对Java ee 进行一定程度的学习,希望最后自己能尽可能掌握Java ee的知识 企业及应用的特点:企业级的应用通常比较庞大,而且其中的数据需要保密. Java ee 框架图

  4. [js]js中函数传参判断

    1,通过|| function fun(x,y){ x=x||0; y=y||1; alert(x+y); } fun(); 2.通过undefined对比 function fun(x,y){ if ...

  5. 图片居中table-cell

  6. Python3.0以上版本在对比图片相似中的应用

    首先声明一下,代码是从网上找到的,只是本人作以简单的修改. 请大家尊重原创. 我本地用到的是 Python 3.4   以及 Pillow (4.0.0)  第三方包. 方法一. #!/usr/bin ...

  7. 杨韬的Markdown自定义CSS样式

    效果 样例 杨韬的Python/Jupyter学习笔记 Markdown例子链接页面 代码 /*主标题*/ #cb_post_title_url{ font-size: 31px; } /*h1,h2 ...

  8. 记录　用tiny6410 j-link eclipse 在线调试裸机代码leds

    1．nand flash烧写uboot 并且启动nandflash uboot,用来初始化6410,进入uboot命令行界面 2．在terminal中输入JLinkGDBServer -device ...

  9. 使用查询分析器和SQLCMD分别登录远程的SQL2005的1434端口

    SQLCMD是操作SQLSERVER的一个命令行工具, 而查询分析器是它的图形工具     查询分析器(SQL2005下叫managerment studio),连接远程的SQLSERVER2005, ...

  10. Docker Compose 一键部署Nginx代理Tomcat集群

    Docker Compose 一键部署Nginx代理Tomcat集群 目录结构 [root@localhost ~]# tree compose_nginx_tomcat/ compose_nginx ...