最新公告
  • 欢迎您光临源码资源下载站,一个优质的网站源码和小程序源码分享基地。
  • js 鼠标移上去修改style属性

    正文概述 建站知识   2023-12-15 21:17:20  
    演示效果
    鼠标移上去,颜色显示为红色,鼠标移开,颜色显示为黑色。
    获取id对象:document.getElementById()
    鼠标移上去:onmouseover
    鼠标移开:onmouseout
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box1{
                height: 30px;
                text-align: center;
                font: 30px/30px "楷体";
            }
        </style>
    </head>
    <body>
        <div id="box1">
            锣鼓一响,黄金万<span id="span">两</span>
        </div>
        <script>
            document.getElementById("box1").onmouseover = function(){
                document.getElementById("span").style.color = "red";
            };
            document.getElementById("box1").onmouseout = function(){
                document.getElementById("span").style.color = "#000";
            };
        </script>
    </body>
    </html> js 鼠标移上去修改style属性
    皓玉源码网,一个优质的源码资源平台!
    皓玉源码网 » js 鼠标移上去修改style属性