获取css属性的style getComputedStyle currentStyle三种方法的区别总结

css中有三种样式,分别是内嵌样式 内部样式 外部样式表

1.style

语法:element.style.xxx 这种只能取得内嵌样式的属性,获取样式能读能写

2.currentStyle

语法:element.currentStyle[xxx] 可以取得内部和外部样式,但是只兼容ie浏览器,获取的样式只能读

实例:document.creatElement(‘div‘).currentStyle[‘width‘]  取得元素的宽度

3.getComputedStyle

语法: window.getComputedStyle(element,null).xxx     document.defaultView.getComputedStyle(element,null).xxx

作用和currentStyle一样但是不适用于ie浏览器,会获得元素所有原始样式,即使这个元素什么样式也没有设置,其中第二种写法源于jQuery源码写法,是.css()的底层操作方法。

可以写一个函数用于兼容所有浏览器获得其样式

function getStyle(element,property) {
          return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element,false)[property] : element.currentStyle[property];
}
时间: 2024-10-13 08:59:29

获取css属性的style getComputedStyle currentStyle三种方法的区别总结的相关文章

用css伪类制作三角形的三种方法

在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) 例如:  .next:after{ content: ""; width: 6px; height: 6px; border-left: 1px solid #666; border-bottom: 1px solid #666; transform: rotate(225deg); -w

java中创建线程的三种方法以及区别

Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.Java可以用三种方式来创建线程,如下所示: 1)继承Thread类创建线程 2)实现Runnable接口创建线程 3)使用Callable和Future创建线程 下面让我们分别来看看这三种创建线程的方法. ------------------------继承Thread类创建线程--------------------- 通过继承Thread类来创建并启动多线程的一般步骤如下 1]d定义Thread类的子类

android 获取sharedpreference的三种方法的区别

1. public SharedPreferences getPreferences (int mode) 通过Activity对象获取,获取的是本Activity私有的Preference,保存在系统中的xml形式的文件的名称为这个Activity的名字,因此一个Activity只能有一个,属于这个Activity. 2. public SharedPreferences getSharedPreferences (String name, int mode) 因为Activity继承了Con

css不定高图文垂直居中的三种方法

html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg.com/bdr/_240_/t0196d3945287174d27.jpg" alt=""> <span class="text">111111111</span> </div> css部分 /*方法1:table-c

JS获取CSS属性值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <ti

CSS实现导航条Tab切换的三种方法

前面的话 ??导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 ??根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效果,有两种布局方法:语义布局和视觉布局 [语义布局] ??从语义布局的角度来看,每一个导航标题和其对应的导航内容应该是一个整体 <style> body,p{margin: 0;} h2{margin: 0;font-size:100%;} ul{margin: 0;padding: 0;li

Java反射定义、获取Class三种方法

反射机制的定义: 在运行状态时(动态的),对于任意一个类,都能够得到这个类的所有属性和方法.  对于任意一个对象,都能够调用它的任意属性和方法. Class类是反射机制的起源,我们得到Class类对象有3种方法: 第一种:通过类名获得 Class<?> class = ClassName.class; 第二种:通过类名全路径获得: Class<?> class = Class.forName("类名全路径"); 第三种:通过实例对象获得: Class<?&

HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式:                  在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>: 内部样式(嵌入式):是由<style></style>标记对放在<head></head>中: 外部样式 :          

页面中插入CSS样式的三种方法

页面中插入css样式的三种方法总结 1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. <link>标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="path/myCss.css"/> <