zoukankan      html  css  js  c++  java
  • js 动态生成div显示id

    <!DOCTYPE html>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            onload = function () {
                var body = document.getElementsByTagName('body')[0];
                var ps = document.getElementsByTagName('p');
                var dv = document.createElement('div');
                dv.style.width = '100px';
                dv.style.height = '100px';
                body.appendChild(dv);
                dv.style.display = 'none';
                for (var i = 0; i < ps.length; i++) {
                    ps[i].onmouseover = function (e) {
                        dv.style.position = 'absolute';                    
                        dv.style.left = e.clientX + 'px';
                        dv.style.top = e.clientY + 'px';
                        dv.innerHTML = this.id;
                        dv.style.display = 'block';



                    };
                    ps[i].onmouseout = function () {
                        dv.style.display = 'none';
                    }

                }
            }
        </script>
    </head>
    <body>
       <p id="1">1</p>
       <p id="2">2</p>
       <p id="3">3</p>
       <p id="4">4</p>
       <p id="5">5</p>
    </body>
    </html>
  • 相关阅读:
    SpringBoot-源码解析
    SpringBoot快速部署
    vue.js
    数据库设计--三范式
    mysql 建表及练习
    索引复制迁移
    nginx检查、重启、、、
    设计模式--Strategy 策略模式
    设计模式--设计原则
    设计模式--Template Method(模板方法)
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434716.html
Copyright © 2011-2022 走看看