JS学习笔记一(JS的显示方案)-CFANZ编程社区

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

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

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

这样会在网页上显示 11. 后面跟什么显示什么。这样会在网页上显示11.后面跟什么显示什么。这样会在网页上显示11.后面跟什么显示什么。

当然，这样做是改变了 i d 为 d e m o 的标签的值了当然，这样做是改变了id为demo的标签的值了当然，这样做是改变了id为demo的标签的值了

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

document.write(5+6)

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

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

window.alert(5 + 6);

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

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

console.log(5+6);

这个 11 不会直接显示出来。这个11不会直接显示出来。这个11不会直接显示出来。

请右键检查网页，选择 C o n s o l e ， 11 就在那里。请右键检查网页，选择Console，11就在那里。请右键检查网页，选择Console，11就在那里。

− − − − − − − − − − − 我是华丽的分割线 O ( ∩ ∩ ) O − − − − − − − − − − − − − − \color{Orange}{-----------我是华丽的分割线O(∩_∩)O--------------} −−−−−−−−−−−我是华丽的分割线O(∩∩)O−−−−−−−−−−−−−−

Ⅰ . 通过 j s 完成按钮来改变图片 \color{red}{Ⅰ.通过js完成按钮来改变图片} Ⅰ.通过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 名字 ) + 修改属性 document.getElementById(要修改的id名字)+修改属性 document.getElementById(要修改的id名字)+修改属性

<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 从而改变图片其实就是通过getElementById来修改src从而改变图片其实就是通过getElementById来修改src从而改变图片

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

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

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

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

Ⅱ . 通过 J S 完成按钮和函数的简单联动 \color{Purple}{Ⅱ.通过JS完成按钮和函数的简单联动} Ⅱ.通过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>