获取css的方法区别

不试试怎么知道自己不可以？对吧

首先我们要知道css在HTML中有多少总方法？呵呵大家都知道的

行内：顾名思义就是和标签在同一行

<div class="text" style="width: 100px;">

内联:就是在HTML中的<style></style>标签中邪样式的方法

外联：就是<link rel="stylesheet" src=""/这样的写法

好了我们进入正题：

大家可能都知道用，object.style.type的方法去改变一个标签元素的样式，但其实这样改变的只是改变了标签元素中的style中的值，相当与标签里写了一个样式这其实是不好的，但是为什么很多情况下我们要用这个呢？为什么呢？呵呵因为他简单，（他可以很快的获取，但是只是在标签元素是的值，但是用的多的原因还是因为他可以改变值）

那么我们如何可以获取和更改css内联或外联中的值呢？

getComputedStyle() 方法

用于获取指定元素的 CSS 样式，获取的样式是元素在浏览器中最终渲染效果的样式。

语法：

window.getComputedStyle(element, pseudoElement)

element: 必需，要获取样式的元素。
pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。

这里的getComputedStyle他是只读，不可以进行修改，如果我们要对其进行修改就要加上getProperValue属性就可以了

function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
    document.getElementById("demo").innerHTML = theCSSprop;
}

大概的用法就是这样

这里需要注意的是getProperValue中的值不可以是驼峰的写法；但getProperValue他是可以省略的省略后，他可以显示为一个方括号，在方括号中可以用驼峰写法，具体的的写法如下

function myFunction(){
    var elem = document.getElementById("test");
    var theCSSprop = window.getComputedStyle(elem, null)['backgroundColor']
    document.getElementById("demo").innerHTML = theCSSprop;
}

IE的问题

currentStyle是IE浏览器自娱自乐的一个属性，其与element.style可以说是近亲，至少在使用形式上类似，element.currentStyle，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外链CSS文件，页面中嵌入的<style>属性等）。

因此，从作用上将，getComputedStyle方法与currentStyle属性走的很近，形式上(写法上)则style与currentStyle走的近。不过，currentStyle属性貌似不支持伪类样式获取，这是与getComputedStyle方法的差异，也是jQuery css()方法无法体现的一点。

用法：

var text = document.querySelector(".text");
console.log(text.currentStyle.backgroundColor);//ie上可以输出

所以就出现了兼容的问题？下面是我自己封装的一个方法

function setstyle(element,type){
	if(element.currentStyle){
		console.log(type);
		console.log(element.currentStyle.type);
	}else{
		console.log(getComputedStyle(element,null)[type]);
	}
}
setstyle(text,"width"); 
setstyle(text,"backgroundColor");//返回的是rgb格式

这里需要讲解的是当上文的getPropertyValue中的属性值不可以是驼峰，当把他省略了他里面的值就可以放驼峰了所以就有了以上的写法

看到了这里有一个问题

有了jQuery等优秀库，我们有熟悉底层的getComputedStyle方法的必要吗？

实际上，本文一直没有深入展开getComputedStyle方法一个很重要的，类似css()方法没有的功能——获取伪类元素样式。但从这一点上讲，熟悉getComputedStyle方法有必要。

获取css的方法区别

猜你喜欢