zoukankan      html  css  js  c++  java
  • offsetTop无法获取目标display为none的值

    如题

    在css 里修改img为display:none的话

        <style>
            * {
                    margin: 0;
                    padding: 0;
                    position: relative;
                }
                
            img {
                visibility: hidden;
                /* display: none; */
            }
    
        </style>
    

    我们获取它的offsetTop的值为0:

    var aImgs = document.images;
    alert(aImgs[2].offsetHeight);
    

    应该使用visibility: hidden;代替disply:none.

    一个需求用到的笔记。

    END

    code:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <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>img Test</title>
        <style>
            * {
                    margin: 0;
                    padding: 0;
                    position: relative;
                }
                
            img {
                visibility: hidden;
                /* display: none; */
            }
    
        </style>
    </head>
    <body>
        <div id="box">
            <img id="one_img" src="../images/0.jpg" alt="null">
            <img src="../images/1.jpg" alt="null">
            <img src="../images/2.jpg" alt="null">
        </div>
        <script>
            var aImgs = document.images;
            var one_img = document.getElementById("one_img");
            //one_img.style.display="none";
            // for(var i=0;i<aImgs.length;i++){
            //     aImgs[i].style.display="block";
            // }
    
            alert(aImgs[2].offsetHeight);
    
    
        </script>
    </body>
    </html>
    
  • 相关阅读:
    Elixir 简介
    docker 基础
    函数式和面向对象
    react-native 简介及环境
    Ecto 总结
    使用 dep 配置 golang 开发环境
    docker 私有仓库简易搭建
    Elixir 单元测试
    基于资源的权限系统-API设计
    差商代微商的方法求解一阶常微分方程
  • 原文地址:https://www.cnblogs.com/famine/p/9946951.html
Copyright © 2011-2022 走看看