js怎么调用java js怎么调用css的样式

在介绍js操作css样式之前，我先给大家介绍一下css样式在网页html中是如何加载的，在html页面中加载css样式可以分为三种，分别为：内嵌样式(Inline Style)、内部样式(Internal Style Sheet)、外联样式(External Style Sheet)。 内嵌样式即为在DOM元素中直接添加style属性来改表元素效果，如：内嵌样式。它只能改变该元素样式。 内部样式即在页面中添加css样式，如：在页面中添加。它可以改变整个页面元素效果。 外联样式即加载外部css样式文件,它有两种方式加载外部样式，一种是： ，另一种是：。 最后我们就来说说js如何操作css样式的。 1、js操作内嵌样式。

在介绍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操作外联样式。