js操作css樣式

在介紹js操作css樣式之前，我先給大家介紹一下css樣式在網頁html中是如何載入的，在html頁面中載入css樣式可以分為三種表現形式，分別為：內嵌樣式(Inline Style)、內部樣式(Internal Style Sheet)、外聯樣式(External Style Sheet)。

內嵌樣式即為在DOM元素中直接添加style屬性來改表元素效果，如：<div style="color:#f00">內嵌樣式</div>。它只能改變該元素樣式。

內部樣式即在頁面中添加css樣式，如：在頁面中添加<style type="css/text">div{color:#f00}</style>。它可以改變整個頁面元素效果。

外聯樣式即載入外部css樣式檔案,它有兩種方式載入外部樣式，一種是：<link rel="stylesheet" type="text/css" href="test.css" /> ，另一種是：<style type="css/text">@import test.css</style>。

最後我們來說說js如何操作css樣式的。 

1、js操作內嵌樣式。

<script type="text/javascript">

document.getElementById('test').style.color = '#000';

</script>

2、js操作內部樣式。

<script type="text/javascript">

方法一： 

 

function getStyle(selector, attr) {for(i = 0, len = document.styleSheets.length; i < len; i++) {var rules;if(document.styleSheets[i].rules) {/*for ie*/ rules = document.styleSheets[i].rules;} else {/*for 非ie*/rules = document.styleSheets[i].cssRules;}for(j = 0, rlen = rules.length; j < rlen; j++) {if(rules[j].selectorText == selector) {alert(rules[j].style[attr]);}}}}

 

</script>

方法二：

<script type="text/javascript">

IE：elementObj.currentStyle

w3c標準：window.getComputedStyle(elementObj, null)  或 document.defaultView.getComputedStyle(elementObj, null )

document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(id,null).getPropertyValue("background-color"):id.currentStyle["backgroundColor"]; 

</scirpt> 
 

3、js操作外聯樣式。