封装

	  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. swp文件已存在

    vim编辑某个文件时,提示.xxx.sh.swp文件已存在是因为异常退出后,linux会生成一个swp文件,无论选择什么,下次进入还是会提示ll 命令无法看到文件使用 rm -rf .xxx.sh.s ...

  2. Gym 102056I - Misunderstood … Missing - [DP][The 2018 ICPC Asia-East Continent Final Problem I]

    题目链接:https://codeforces.com/gym/102056/problem/I Warm sunshine, cool wind and a fine day, while the ...

  3. ffmpeg命令的使用

    参考博客:https://www.cnblogs.com/wainiwann/p/4128154.html 但是红色网页总结的 “ffmpeg 用法” 非常全面. http://www.360doc. ...

  4. asp.net mvc easyui tree

    1.html页面代码: <div class="easyui-panel" style="padding:5px" id="powerTree& ...

  5. vue-cli脚手架

    cnpm i vue-cli -g   //npm 安装报错,原因不明,可能是我改过东西的原因,但是cnpm可以安装 命令行进入要新建的vue的目录执行 C:\Users\76912\Videos\v ...

  6. docker+httpd的安装

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

  7. python 中为什么不需要重载 参数*arg和**args

    函数重载主要是为了解决两个问题. (1)可变参数类型. (2) 可变参数个数. 另外,一个基本的设计原则是,仅仅当两个函数除了参数类型和参数个数不同以外,其功能是完全相同的,此时才使用函数重载,如果两 ...

  8. centos7.5固定局域网ip

    有点时候,比如像我们单位,没事干就停一次网,结果ip变了,还得重新看ip,重新配置,很麻烦,所以干脆把自己ip固定,以不变应万变!!! 1.首先查看自己的ip是什么: $ ifconfig eno1: ...

  9. Python str byte 互相转换

  10. 关于EasyUI查询功能的二级联动

    EasyUI 二级联动 data-options="multiple:true" 属性可实现对于车牌号的多选.