jQuery相关尺寸的获取和设置

最新推荐文章于 2022-10-07 10:59:00 发布

Chains-X ♔

最新推荐文章于 2022-10-07 10:59:00 发布

阅读量100

点赞数

分类专栏： WEB前端文章标签： web前端 jQuery

本文链接：https://blog.csdn.net/mk1843109092/article/details/100626795

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

相关尺寸

获取元素相对于文档的偏移量

var pos = $('#small').offset(); 
// console.log(pos.left);
// console.log(pos.top);

获取当前元素相对于父级元素的偏移量

var l = $('#small').position().left;
var t = $('#small').position().top;
// console.log(l,t);

获取文档滚动距离

var st = $(document).scrollTop();
var sl = $(document).scrollLeft();

获取元素的宽度和高度

var w = $('#big').width();
var h = $('#big').height();

设置元素的宽度和高度

$('#big').width(400);
$('#big').height(400);
// console.log(w,h);

获取可视区域的宽度和高度

var cw = $(window).width();
var ch = $(window).height();

获取文档的宽度和高度

var cw = $(document).width();
var ch = $(document).height();
console.log(cw,ch);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery相关尺寸的获取</title>
    <script src="./jquery-1.8.3.min.js"></script>
    <style>
        *{margin:0;padding:0}
        .item1{
            width:300px;
            height:300px;
            background:red;
            margin-left:100px;
        }

        .wrap{
            width:800px;
            height:800px;
            border:1px solid red;
            position:absolute;
            left:100px;
            top:100px;
        }
        .item2{
            width:200px;
            height:200px;
            background:red;
            /*margin-top:20px;*/
            /*margin-left:20px;*/
            position:absolute;
            top:20px;
            left:20px;
        }
    </style>
</head>
<body style="height:1500px">
    <!--<div class="item1"></div>-->
    <div class="wrap">
        <div class="item2"></div>
    </div>
    <script>
        // 获取元素相对于文档的偏移位置 返回的是一个对象 有left属性和 top属性
//        var of=$('.wrap').offset();
        //var of=$('.item2').offset();
        //console.log(of.left,of.top);

        // 获取当前元素相对于父级元素的定位 位置 (当前元素必须有position属性)
        //var P=$('.item2').position();
        //console.log(P.left);

        // 获取当前文档的滚动距离
        //var scro=$(document).scrollTop();
        //console.log(scro);

        // 获取元素的宽度和高度
        //var W=$('.item2').width();
        //var H=$('.item2').height();
        //console.log(W,H);

        // 设置元素的宽度和高度
        //$('.item2').width(100);
        //$('.item2').height(100);

        // 获取可视区域的宽度和高度
        //var W=$(window).width();
        //var H=$(window).height();
        //console.log(W,H);

        // 获取文档的宽度和高度
        var W=$(document).width();
        var H=$(document).height();
        console.log(W,H);
    </script>
</body>
</html>

Chains-X ♔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery相关尺寸的获取和设置

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫