JavaScript 學習初篇（第一課）

waylonZXH發表於2018-11-21
JavaScript

學習出處 https://study.163.com/course/courseMain.htm?courseId=224014

程式碼：18.11.21

getElementById-------相容
任何標籤都可以加ID
calss在javascript裡寫className其他與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:300px;
            background: red ;}
    </style>
<script>
function toGreen()
{
    document.getElementById('div1').style.width='300px';
    document.getElementById('div1').style.height='400px';
    document.getElementById('div1').style.background='green';
}
function toRed()
{
    document.getElementById('div1').style.width='200px';
    document.getElementById('div1').style.height='300px';
    document.getElementById('div1').style.background='red';
}
</script>
</head>
<body>
    <div id="div1"
    onmouseover="toGreen()"
    onmouseout="toRed()"
></div>
</body>
</html>

function 函式名（）
{
程式碼
}
函式名（）

函式的定義和呼叫

<!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>
    <script>
    function show(){
        alert('abc');

    }
    show();
    </script>
</head>
<body>
    
</body>
</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>改文字</title>
    <script>
    function setText(){
        var oTxt=document.getElementById('text1');
        oTxt.value="需要改指定內容的內容";
        oTxt.title='提示的文字';
    }
    
    </script>
</head>
<body>
    <input id="text1" type="text">
    <input type="button" value="改文字" onclick="setText()">
</body>
</html>

換膚/夜間模式

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>換膚</title>
<link id="l1" rel="stylesheet" type="text/css" href="css/css1.css">
<script>
function skin1(){
    var oL=document.getElementById("l1")
    oL.href='css/css1.css';
}
function skin2(){
    var oL=document.getElementById("l1")
    oL.href='css/css2.css';
}

</script>

</head>
<body>
    <input type="button" value="green" onclick="skin1()">
    <input type="button" value="red" onclick="skin2()">
</body>
</html>

css1 css2

body{background:green}
input{width :100px;height: 100px;background:blueviolet;}

body{background: red}
input{width :100px;height: 100px;background:blanchedalmond;}

if（條件）{
語句1
}else{
語句2
}

if語句 （顯示隱藏）

<!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:#ccc;display:block;}
    </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="顯示隱藏"; onclick=showHide() >
    <div id="div1">

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

函式傳參（div變色例子）

<!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:200px;background:#ccc;}
    </style>
<script>
    function to(clock)
    {
        var oDiv=document.getElementById('div1');
        oDiv.style.background=clock;

    }
</script>
</head>
<body>
    <input type="button" value="變綠" onclick="to('green')">
    <input type="button" value="變黃" onclick="to('yellow')">
    <input type="button" value="變黑" onclick="to('black')">
    <div id='div1'></div>
</body>
</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: 200px;background: #ccc;}
</style>
<script>
    function setStyle(name,value){
        var oDiv=document.getElementById('div1');
        oDiv.style[name]=value;
    }
</script>
</head>
<body>
    <input type="button" value="變寬" onclick="setStyle('width','400px')">
    <input type="button" value="變高" onclick="setStyle('height','400px')">
    <input type="button" value="變綠" onclick="setStyle('background','green')">
    <div id='div1'>

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

相關文章