JavaScript.2-CSDN博客

本文链接：https://blog.csdn.net/qq_43695167/article/details/122621025

一、简介

1，JavaScript，JS，一种语言，常用于写网页特效；
2，Html，CSS，JS：结构，表现，行为
（JS处理用户的行为和操作）；
3，Java和JS两者都是语言，关系并不大。

二、实例

#box{
display:block;
}//1.点击按钮，让div显示（事件，用户的行为和操作）

<input type="botton" value="点击" onclick="div1.style.display='block'">
//2."."是"的"意思，"="是“赋值”的含义；div1直接用有兼容性问题，可通过id获取元素

<input type="botton" value="点击"
onclick="document.getElementById('div1').style.display='block'">

<div id="div1" onmouseover="document.getElementById('div1').style.width
='200px';document.getElementById('div1').style.height='200px'" 
onmouseout="document.getElementById('div1').style.width='100px';
document.getElementById('div1').style.height='100px'"></div>
//3.鼠标滑过变大，定义加调用函数，实现清晰化

<script>
function toBig(){
  var oDiv=document.getElementById('div1');
  //4.变量，用var声明（实现代码的简洁和复用）
  oDiv.style.width='200px';
  oDiv.style.height='200px';
}
function toSmall(){
  var oDiv=document.getElementById('div1');
  oDiv.style.width='100px';
  oDiv.style.height='100px';
}
</script>
<div id="div1" onmouseover="toBig()" onmouseout="toSmall()"></div>

//5.点击按钮，如果div显示，那么隐藏，如果div隐藏，那么显示；
//（1）点击按钮做什么onclick()；（2）判断（“==”表示判断）；（3）显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1{
      width: 100px;
      height: 100px;
      background: red;
      display: none;
     }
  </style>
  <script>
    function showHide(){
      var oDiv=document.getElementById('div1');
      if(oDiv.style.display=='block'){
        oDiv.style.display='none';
      }else{
        oDiv.style.display='block';
      }
    }
  </script>
</head>
<body>
<input type="button" value="显示隐藏" id="btn" onclick="showHide()">
<div id="div1"></div>
</body>
</html>  

//6.需求：点击不同的按钮，切换不同的样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1{
      width: 100px;
      height: 100px;
      background: blueviolet;
    }
    .day{
      background: white;
      font-size: 10px;
    }
    .night{
      background: black;
      font-size: 20px;
    }
  </style>
  <script>
    function day(){
      document.body.className='day';
    }
    function night(){
      document.body.className='night';
    }
  </script>
</head>
<body>
  <input type="button" value="白天" onclick="day()">
  <input type="button" value="黑夜" onclick="night()">
  <div id="div1">Welcome to Chine!</div>
</body>
</html>