js函数的应用_js 函数实际应用-CSDN博客

本文链接：https://blog.csdn.net/weixin_43158701/article/details/102630052

js函数的应用，代码如下

<!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>javaScript</title>
    <style>
        #div1{
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>
    <script>
        function togreen(){
            document.getElementById('div1').style.width='500px';
            document.getElementById('div1').style.height='500px';
            document.getElementById('div1').style.background='green';
        }
        function toRed(){
            document.getElementById('div1').style.width='200px';
            document.getElementById('div1').style.height='200px';
            document.getElementById('div1').style.background='red';           
        }
    </script>
</head>
<body>
    <div id='div1' onmouseover="togreen()" onmouseout="toRed()"></div>
</body>
</html>

换肤例子：

index.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 id='lin' rel="stylesheet" type="text/css" href="1.css">
    <script>
        function toCss1(){
            var lin = document.getElementById('lin');
            lin.href="1.css";
        }
        function toCss2(){
            var lin = document.getElementById('lin');
            lin.href="2.css";
        }
    </script>
</head>
<body>
    <span id="span">换肤</span>
    <button id="pi1" onclick="toCss1()">皮肤1</button>
    <button id="pi2" onclick="toCss2()">皮肤2</button>
</body>
</html>

1.css(皮肤1)的代码：

#span{
    color: blue;
}
#pi1{
    color: white;
    width:auto;
    height:30px;
    background-color: red;
}
#pi2{
    color: white;
    width:auto;
    height: 30px;
    background-color: red;
}

2.css(皮肤2)的代码：

#span{
    color: red;
}
#pi1{
    color: black;
    width:auto;
    height:30px;
    background-color: blue;
}
#pi2{
    color: black;
    width:auto;
    height: 30px;
    background-color: blue;
}

结果：

皮肤一：

皮肤二

<!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 id='lin' rel="stylesheet" type="text/css" href="1.css">
    <style>
        #div1{
            width:100px;
            height: 300px;
            display: none;
            background-color: dimgrey;
        }
    </style>
    <script>
        function showHidden(){
            var hid = document.getElementById('div1');
            if(hid.style.display == 'block'){
                hid.style.display = 'none';
            }else{
                hid.style.display = 'block';
            }
        }
    </script>
</head>
<body>
    
    <input id="but1" type="button" value="改文字" onclick="showHidden()">
    <div id="div1">

    </div>
</body>
</html>

ClassName的使用，html中直接用class="xxx"来用，而js中得用className=''用，例子如下：

代码：

<!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>changeClass</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .red{
            background-color: red;
        }
    </style>
    <script>
        function toRed(){
            var div1 = document.getElementById('div1');
            div1.className = 'red';
        }
    </script>
</head>
<body>
    <input type="button" value="变红" onclick="toRed()">
    <div id="div1">

    </div>
    
</body>
</html>