Js第一天笔记——获取id,tag,变量,传参,修改属性

最新推荐文章于 2023-11-06 15:47:19 发布

红豌豆

最新推荐文章于 2023-11-06 15:47:19 发布

阅读量850

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_64353584/article/details/122773626

版权

onmouseover 鼠标移入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标经过提示</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 1px solid red;
            display: none;
        }
    </style>
</head>
<body>
    <!-- <input type="checkbox" onmouseover="alert('OK')"/>  鼠标移入就显示，离开就隐藏-->
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'"/>
    <div id="div1"></div>
</body>
</html>

function 函数

   <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>函数</title>
            <style type="text/css">
                div{
                    width: 200px;
                    height: 200px;
                    background-color:green;
                    border:1px solid pink;
                }
            </style>
            <script type="text/jscript">
                function pink_r(){
                    document.getElementById('div1').style.height='400px';
                    document.getElementById('div1').style.width='400px';
                    document.getElementById('div1').style.background='red';
                }
                function or(){
                    document.getElementById('div1').style.height='400px';
                    document.getElementById('div1').style.width='400px';
                    document.getElementById('div1').style.background='orange';
                }
            </script>
        </head>
        <body>
            <div id="div1" onmouseover="pink_r()" onmouseout="or()" >
            </div>
        </body>
    </html>

   var变量

 <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title>变量</title>
                <style type="text/css">
                    #div1{ /* id选择器 */
                        width: 200px;
                        height: 200px;
                        background-color: aquamarine;
                    }
                </style>
                <script>
                    function to_red(){
                        var div1 = document.getElementById('div1');
                        div1.style.height="400px";
                        div1.style.width="400px";
                        div1.style.background="red"
                    }
                    function to_orange(){
                        var div1 = document.getElementById('div1');
                        div1.style.height="400px";
                        div1.style.width="400px";
                        div1.style.background="orange"
                    }
                </script>
            </head>
            <body>
                <div id="div1" onmouseover="to_red()" onmouseout="to_orange()">
                </div>
            </body>
        </html>

   变量定义

   <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title>变量定义</title>
                <script>
                    function arc(){
                        alert("恭喜您获得一百万奖金，请备好猜到来XXXX银行领取.....")
                    }
                    arc();
                </script>
            </head>
            <b

最低0.47元/天解锁文章

红豌豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js第一天笔记——获取id,tag,变量,传参,修改属性

onmouseover 鼠标移入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标经过提示</title> <style type="text/css"> div{ width: 200px; height: 200px; .
复制链接

扫一扫