JS学习笔记一(JS的显示方案)_js改变h't'm'l-CSDN博客

本文介绍JavaScript在网页中显示数据的方法，包括innerHTML、write()、alert()及console.log()的使用。同时，深入探讨如何通过JS操作DOM实现图片切换、文本样式调整及元素的显示隐藏，以及如何利用按钮和函数进行简单的事件联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$首先来了解一下JS的在网页的显示方案\colorbox{Pink}{首先来了解一下JS的在网页的显示方案}$

$一、使用 i n n e r H T M L$

document.getElementById("demo").innerHTML=5+6

$这样会在网页上显示 11 . 后面跟什么显示什么。$
$当然，这样做是改变了 i d 为 d e m o 的标签的值了$

$二、使用 w r i t e ()$

document.write(5+6)

$但是这个方法好像会删掉所有 h t m l, 所以只用来测试$

$三、使用 w i n d o w . a l e r t ()$

window.alert(5 + 6);

$这样进入网页时会弹出警告框，里面写着 11 .$

$四、使用 c o n s o l e . l o g ()$

console.log(5+6);

$这个 11 不会直接显示出来。$
$请右键检查网页，选择 C o n s o l e ， 11 就在那里。$

$−−−−−−−−−−−我是华丽的分割线O(∩∩)O−−−−−−−−−−−−−−\color{Orange}{-----------我是华丽的分割线O(∩_∩)O--------------}$
$Ⅰ.通过js完成按钮来改变图片\color{red}{Ⅰ.通过js完成按钮来改变图片}$

固定模板都是

$d o c u m e n t . g e t E l e m e n t B y I d (要修改的 i d 名字) + 修改属性$

<button 
	onclick="document.getElementById('myimage').src='康娜吃知了.gif'">变换!喜欢克里斯提娜!!</button>
	<img id="myimage" src="克里斯提娜.gif">
	<button
	onclick="document.getElementById('myimage').src='克里缇娜.gif'">
		我要克里斯提娜!!
</button>>

$其实就是通过 g e t E l e m e n t B y I d 来修改 s r c 从而改变图片$

$当然普遍一点的，修改文字大小也是可以喽$

	document.getElementById("demo").style.fontSize = "25px";

$我甚至可以隐藏或显示 h t m l 元素$

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="block";//显示

$Ⅱ.通过JS完成按钮和函数的简单联动\color{Purple}{Ⅱ.通过JS完成按钮和函数的简单联动}$

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function my_firstfun(){
			document.getElementById("demo").innerHTML="你点我干什么啊";
		}
	</script>
</head>
<body>
	<p id="demo">请不要点我。</p>
	<button type="button" οnclick="my_firstfun()">快来点我吧!</button>
</body>