北大青鸟

网站首页 > 热门课程 > 软件测试工程师 >

站内公告

javascript基础应用:应用JavaScript改变HTML元素的样式

责任编辑:宏鹏来源:武汉北大青鸟鲁广校区时间:2013-12-25 16:31:33
导读:网站建设除了经常使用div+css来设计网站以外,javascript也是经常应用到html代码中,实现特殊的网页效果,本文介绍应用JavaScript改变HTML元素的样式,以改变文字颜色实例做演示。

小编在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元素的样式,以改变文字颜色实例做演示。

专业老师指导

赵老师

赵老师

从事IT教育培训十年有余,致力于帮助广大学子找到适合自己的专业

立即在线咨询

培训咨询客服

陈老师

陈老师

IT培训专业客服,用自己的真诚解决了无数学子的困惑

立即在线咨询

本文地址:https://m.027hpedu.com/html/3040.html

文章标题:javascript基础应用:应用JavaScript改变HTML元素的样式

上一篇:Javascript基础学习:利用javascript改变html中图片的显示

下一篇:javascript基础教程:基本语法、变量、表达式与运算符

热点关注

推荐软件测试工程师

热门软件测试工程师

预约你的精彩未来

预约将免费领取7天课程体验卡

-------请选择试预约课程-------

JAVA
WEB前端
PHP
UI设计
Python
电子商务
视频剪辑
大数据工程师
平面设计

83345人已领取

全国百余家校区

只为您方便就学

北大青鸟鲁广校区

北大青鸟鲁广校区

武汉市洪山区珞喻路724号(地铁二号线光谷广场站F口出)

预约到校
领取学习大礼包

首页

热门课程

视频网课

新闻资讯

关于学校

联系学校

预约选课申请

  • 预约时间

    请选择预约时间

  • 预约课程

    请选择预约课程

  • 姓   名
  • 手机号
  • QQ 号
  • 微信号

添加老师微信号

专业老师24小时1对1学习指导

定制专属于你的专属学习方案

微信号:17740513250

复制老师的微信号

复制成功啦

快去微信添加老师为好友吧~

北大青鸟小青

微信号:17740513250

北大青鸟小青

微信号:17740513250

设置备注
小主知道啦