JavaScript 实例一

最新推荐文章于 2024-11-28 07:24:01 发布

原创最新推荐文章于 2024-11-28 07:24:01 发布 · 702 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #class #border #function #测试 #css

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript修改HTML元素的CSS类属性，并通过一个示例展示了如何根据鼠标悬停状态改变段落样式的具体实现。

class 是样式

需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。

<script type="text/javascript">
	function over(){
		var para = document.getElementById("testPara").className = "testOver"; 
	}
	function out(){
		var para = document.getElementById("testPara").className = "testNormal"; 
	}	
</script>

HTML代码

本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。

<p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()">
    我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。    
</p>

CSS

CSS代码设置了两个测试用的样式。

.testNormal { 
	border:1px solid black;
	}
.testOver {
	background:#999999;
	border:1px solid black; 
	font-weight:bold; 
	padding:3em;
	}