可以获得隐藏的DOM元素的实际长宽的jQuery插件

可以获得隐藏的DOM元素的实际长宽的jQuery插件

可以获得隐藏的DOM元素的实际长宽的jQuery插件

使用方式:

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置参数

示例代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.actual.min"], function() {
                // get hidden element actual width
                console.log($('.hidden').actual('width'));

                // get hidden element actual innerWidth
                console.log($('.hidden').actual('innerWidth'));

                // get hidden element actual outerWidth
                console.log($('.hidden').actual('outerWidth'));

                // get hidden element actual outerWidth and set the `includeMargin` argument
                $('.hidden').actual('outerWidth', {
                    includeMargin: true
                });

                // get hidden element actual height
                console.log($('.hidden').actual('height'));

                // get hidden element actual innerHeight
                console.log($('.hidden').actual('innerHeight'));

                // get hidden element actual outerHeight
                console.log($('.hidden').actual('outerHeight'));

                // get hidden element actual outerHeight and set the `includeMargin` argument
                $('.hidden').actual('outerHeight', {
                    includeMargin: true
                });

                // if the page jumps or blinks, pass a attribute '{ absolute : true }'
                // be very careful, you might get a wrong result depends on how you makrup your html and css
                $('.hidden').actual('height', {
                    absolute: true
                });

                // if you use css3pie with a float element
                // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
                // please see demo/css3pie in action
                $('.hidden').actual('width', {
                    clone: true
                });

            });
        });
    </script>
    <style>
    .hidden{
        display: none;
    }
    </style>
</head>
<body>
    <div class="hidden">
        我的隐藏的元素
    </div>
</body>
</html>



立即下载jquery.actual.min.js查看所有js插件

网友评论0

程序员在线工具箱