小编在Javascript基础学习:利用javascript改变html中图片的显示一文中,介绍了应用javascript来改变html中图片的地址,从而实现通过点击图片开灯关灯的效果。本文通过一段javascript代码的演示,让大家知道怎么应用JavaScript改变HTML元素的样式。详细代码如下:
<!DOCTYPE html>
<html>
<body>
<h1>应用JavaScript改变HTML元素的样式</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
点击之前的样式
点击之后的样式
通过上面点击前后的样式对比,大家可以很容易的就知道区别就是第二行文字颜色发生了改变。其实很简单就是通过x=document.getElementById("demo") 找到元素,然后通过x.style.color="#ff0000"来改变文字的样式。
对以上代码感兴趣的学员可以复制代码到本地自己运行看看实际的效果,如果你对网站建设有兴趣欢迎电话咨询(17740513250)或者网络咨询在线老师有关网站建设相关的培训课程。
本文标题:javascript基础应用:应用JavaScript改变HTML元素的样式,责任编辑:宏鹏,来源:武汉北大青鸟鲁广校区栏目,于2013-12-25 16:31:33发布于北大青鸟鲁广校区。网站建设除了经常使用div+css来设计网站以外,javascript也是经常应用到html代码中,实现特殊的网页效果,本文介绍应用JavaScript改变HTML元素的样式,以改变文字颜色实例做演示。
预约将免费领取7天课程体验卡
只为您方便就学
专业老师24小时1对1学习指导
定制专属于你的专属学习方案
微信号:17740513250
微信号:17740513250