html5点击后改变样式 html点击按钮改变图片

转载

智能开发艺术家 2024-01-11 10:28:06

文章标签 html5点击后改变样式 Web HTML JS html 文章分类 HTML5 移动开发

HTML-利用javascript脚本实现点击按钮更改web显示图片

文档适用对象

html初学者
感兴趣的小白

前言

推荐一个网址，初级学习HTML的一个网址，在线即可查阅基础理论知识，以及调试代码。而且还有代码示例。www.runoob.com
阅读者需要稍微有一些HTML的基础知识，当然如果没有也可以，就当看个热闹
关于html与css和javascript的关系，可以看一下这个作者的文章，html+css+javascript之间的关系与作用
有人说，html就是一个骨架，html+css就是一个植物人，html+css+js 才是活蹦乱跳的人。
单纯的html: 又丑又几乎没有交互性
html+css: 虽然不丑了，但是几乎没有交互性
html+js：丑，但是有交互性 ----我这里网页的实现采用的就是这种结构
html+css+js：又好看又有交互性

如果想要入门Web前端，这三个必须都有所涉猎。
该文章旨在初步了解javascript（即js）在html中的运用，不会很深。

js常识即代码示例说明

1. js脚本的位置
根据我看的别人的网页代码（当然都是比较简单的代码，目前看不懂复杂的…）js脚本的位置有2种情况。
【1】js脚本单独写成了一个文件，即 文件名.js ,再在html中的<head></head>标签中指定调用的js文件路径，加载js文件，调用js文件中的函数；
<script src='myjscode.js'> </script> 【2】js脚本写在html文件中，这种是直接在html代码中的<head> </head>标签中添加一个<script> </script>标签，将js脚本写到其中。直接调用js代码段中的函数。

PS：个人感觉第二种情况适合小项目或者自己学习的项目，如果真的是商用的大项目，还是第一种更专业和系统，便于运维时节约成本。

2. js代码示例说明（拿js脚本在html中的情况示例）

<script>   									//脚本标签，代表如下内容为js脚本
											//说明:这个是一个js代码中的行注释
function displayDate(){						//定义一个方法，方法名为displayDate，定义方法的时候方法名最好是采用驼峰命名法，后续查代码的时候更加方便
	document.getElementById("demo").innerHTML=Date();  //查找到元素id为demo的元素，并将元素的内容定义为Date，Date的功能是，实时读取系统的当前时间
}
function changeimg(){
	document.getElementById("image1").src=""; 		//查找到元素id为image1的元素，并将元素的图片路径重新定义为目标新路径
}
</script>

代码演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
function changeimg(){
	document.getElementById("image1").src="";
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>
<br>
<img id='image1' src='https://www.baidu.com/img/bd_logo1.png?where=super'>
<br>
<button onclick="changeimg()">修改图片</button>
</body>
</html>