JavaScript 学习之路（一）

Day1，学习原生js

1.获取元素 

document.getElementById("selector")

2.监听事件 

 

div1.onmouseenter("selector")

 

3.我的第一个JS网页

　　HTML：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>宁沙沙的第02次作业</title>

    <style>

        div{
            background: gray;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 20px;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            transition: all 1s;
            transform: scale(1);
        }
    </style>

</head>
<body>
    <script>

    </script>
    <div id="div1" data-div="div1" onclick="click_div(this.id)">div1</div>
    <div id="div2" data-div="div2" onclick="click_div(this.id)">div2</div>
    <script src="js/02.js"></script>

</body>
</html>

　　JS：

{
    let div1 = document.getElementById("div1")
    let div2 = document.getElementById("div2")




    div1.onmouseenter = function () {
        div2.style.cssText = "" +
            "background:pink;" +
            "";
        div1.style.cssText = "" +
            "transform: scale(1.2);" +
            "";
    }
    div1.onmouseleave = function () {
        div2.style.cssText = "" +
            "background:gray;" +
            "";
        div1.style.cssText = "" +
            "transform: scale(1);" +
            "";
    }
    div2.onmouseenter = function () {
        div1.style.cssText = "" +
            "background:pink;" +
            "";
        div2.style.cssText = "" +
            "transform: scale(1.2);" +
            "";
    }
    div2.onmouseleave = function () {
        div1.style.cssText = "" +
            "background:gray;" +
            "";
        div2.style.cssText = "" +
            "transform: scale(1);" +
            "";
    }
    function click_div(e) {
        //
        alert('你点到了'+e)

    }
}

4.遇到问题

  html 标签中的onclick 事件 写函数需要在函数名后加 '()' 才能生效

欢迎关注我的新博客

 

posted @ 2019-01-24 17:51  jarhson  阅读(158)  评论(0)    收藏  举报