javascript的基础知识点

一：鼠标提示框

需求描述：鼠标移入都input上，div显示，移出，div消失

分析：控制display=block/none

鼠标移入，鼠标移出事件

 <input type="button" onmouseover="alert('鼠标移入')" onmouseout="alert('鼠标移出')">

功能代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 100px;
            background-color: gray;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'">
    <div id="div1">为了你的信息安全，请不要再网吧内勾选</div> 
</body>
</html>

问题：版本兼容性差，存在div1 is not define的问题，火狐浏览器会出现问题

解决办法：使用 document.getElementById()

功能代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 100px;
            background-color: gray;
            display: none;
        }
    </style>
</head>
<body>
    <input type="button" onmouseover="look();" onmouseout="unlook();">
    <div id="div1">为了你的信息安全，请不要再网吧内勾选</div>
    <script src="13DOM操作.js"></script> # 这里必须在div的下面引用，因为上面引用会先执行js，找不到div1,变量d为none，根本无法修改属性。
    
</body>
</html>

javascript代码

var d = document.getElementById("div1");

function look() {
    d.style.display ='block';
}

function unlook() {
    d.style.display ='none';
}

二：鼠标移入后，div变大，变色

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="big();" onmouseout="small();"></div>
    <script src="13DOM操作.js"></script>
    
</body>
</html>

javasript代码

var d = document.getElementById("div1");

function big() {
    d.style.width ='500px';
    d.style.height='500px';
    d.style.backgroundColor='green';
}

function small() {
    d.style.width ='100px';
    d.style.height='100px';
    d.style.backgroundColor='red';
}

三：网页换肤

实现方式一：

html代码

<body id="body"><input type="submit" id="input1" value="皮肤一" onclick="to_green();">
<input type="submit" id="input2" value="皮肤二" onclick="to_pink();">
<script src="13DOM操作.js"></script>

javadcript代码

var b = document.getElementById("body");

function to_green() {
    b.style.backgroundColor="green";
}

function to_pink() {
    b.style.backgroundColor="pink";
}

实现方式二：

css代码

# css1.css
body {
    background-color: gray;
}

#css2.css
body {
    background-color:yellowgreen;
}

#css3.css
body {
    background-color: pink;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css" id="objlink">  # 知识点：任何标签都可以加id和class选择器，用来控制属性
    <script src="13DOM操作.js"></script>   
</head>
<body>
    <input type="submit" value="皮肤一" onclick="to_green();">
    <input type="submit" value="皮肤二" onclick="to_pink();">
     
</body>
</html>

javascript代码

var obj = document.getElementById("objlink");

function to_green() {
    obj.href = "css2.css";  # 知识点二：任何标签的任何属性都可以修改
}

function to_pink() {
    obj.href = "css3.css";
}

四：点击出现下拉菜单，再次点击，隐藏下拉菜单

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css1.css" id="objlink">
    <style>
        #div1{
            width: 100px;
            height: 500px;
            display: none;
            background-color:pink;
        }
    </style>   
</head>
<body>
    <input type="submit" value="选项" onclick="down();">
    <div id=div1></div>
    <script src="13DOM操作.js"></script>
</body>
</html>

javascript代码

var d = document.getElementById("div1");
function down(){
    if (d.style.display =="none"){   # 和python中的==用法一样，判等
        d.style.display = "block";
    }
    else{
        d.style.display = "none";
    }
}

来源：https://www.cnblogs.com/meloncodezhang/p/12032615.html

标签

html代码

信息安全