<!DOCTYPE html>

<html lang="en">

<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>Document</title>

    <style>

        .box{width:100px;height:100px;padding: 10px;border: solid 20px black;margin: 30px;position: absolute;left: 40px;top: 40px;overflow: auto;}

    </style>

</head>

<body>

<div class="box">

    width()

    height()

    innerWidth() 包含内边距（padding）

    outerWidth()包含内边距和边框(     padding border)

    offset()  获取某个元素相对于浏览器窗口(可视区域的距离)

    position()获取某个元素相对于父元素的偏移距离

    scrollTop()获取垂直滚动条的值；

    scrollTop(value)设置垂直滚动条的值;

    scrollLeft()获取水平滚动条的值；

    scrollLeft(value)设置水平滚动条的值;

</div>

</body>

<script src="../jquery.js"></script>

<script>

    // 获取设置都可

     console.log($(".box").width())          //content 100

     console.log($(".box").innerWidth())          //content+padding 120

     console.log($(".box").outerWidth())          //content+padding+border 160

//     $(".box").width(200) //设置为200

    // 只能获取不能设置

     console.log($(".box").offset())         //position+margin l:70 t:70

     console.log($(".box").position())         //position l:40 t:40

//     $(".box").position({

//         left:100,

//         top:100

//     }) //不能设置  没有用

        $(document).click(function(){

             console.log($(".box").scrollTop()) //输出滚动条距离

            $(".box").scrollTop(333)          //设置距离高度

        })

</script>

</html>

JQ的尺寸类的更多相关文章

  1. js中尺寸类样式

    js中尺寸类样式 一:鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width 1:检测相对于浏览器的位置:e ...

  2. <JavaScript>尺寸类样式的获取

    尺寸类样式的获取 offsetHeight HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数.(content+ ...

  3. ReactNative: 使用尺寸类Dimensions获取屏幕尺寸

    一.简介 在前面创建使用组件时,虽然使用的都是伸缩盒子布局,但是很少使用宽高来进行绝对定位.在iOS中可以通过UIScreen控件获取当前屏幕的宽高,同样地,在RN中提供了一个尺寸组件Dimensio ...

  4. jq操作class类

    https://www.cnblogs.com/sandraryan/ 鼠标移入移除切换样式 方法一: css .menu { color: green; } .active { color: red ...

  5. jQ的四类基本选择器

    jQuery的四种选择器 jQ选择器与css选择器本质上相差不大,但是在使用容易混淆格式或属性 1.基础选择器 $('#id名') $('.类名') $('.类名1 .类名2') $('标签名.类名' ...

  6. QQ空间／朋友圈类界面的搭建

    类似于QQ空间的布局主要是在说说信息.点赞.回复三大部分的自适应布局上. 当我们需要搭建类似QQ空间.微信朋友圈的界面的时候,可做如下操作: 创建一个对应的model类: 创建一个对应model类的f ...

  7. JQ的基本架构

    Jquery的基本架构   引入  以前学习原生JS然后切换到用JQ的时候总觉得很不习惯,甚至有点排斥用JQ.后来自己写项目一直到公司实习用JQ的这段时间,才深深感受到JQ的强大~JQ不仅做到兼容很多 ...

  8. Java类的继承与多态特性-入门笔记

    相信对于继承和多态的概念性我就不在怎么解释啦!不管你是.Net还是Java面向对象编程都是比不缺少一堂课~~Net如此Java亦也有同样的思想成分包含其中. 继承,多态,封装是Java面向对象的3大特 ...

  9. 【jQuery】 jQuery基础

    jQuery 之前在JS的文章中提到过,JS虽然功能全面但是仍然比较接近底层,代码写起来很麻烦,而以jQuery为代表的JS库包装了很多功能,可以让代码更加简单.接下来就来简单地记录一下我学习和所知道 ...

  10. Web前端教程4-JQuery教程

    目录 1. JQuery基础 1.1. 基本语法 1.2. JQ和JS的差异 1.3. JQ入口函数的写法 1.4. JQ核心函数 1.5. JQ对象 2. JQ静态和实例方法 2.1. JQ静态方法 ...

随机推荐

  1. 严重 [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class com.titan.extend.SpringContextLoaderListener

    08-Jun-2022 10:05:21.119 严重 [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardConte ...

  2. 使用python脚本批量造数据

    本篇将采用 Python 脚本的方式进行批量给mysql造数据. 为了使 Python 可以连上数据库(MySQL),并且可以与数据库交互(增删改查等操作),则需要安装 MySQL 客户端操作库.  ...

  3. Flink笔记

    高可用(HA):直白来说就是系统不会因为某台机器,或某个实例挂了,就不能提供服务了.高可用需要做到分布式.负载均衡.自动侦查.自动切换.自动恢复等. 高吞吐: 单位时间内,能传输的数据量,对应指标就是 ...

  4. 设置mode='out-on'导致路由切换过快路由加载报错 Failed to execute 'insertBefore' on 'Node'

    原代码: 解决代码: 原因未知

  5. Python 爬虫代码应该怎么写？

    对于入行已久的老程序员也并不一定精通爬虫代码,这些需要时间的沉淀还需要更多的实战案例,简单的问句你真的会写爬虫么?下面就是我日常写的一个y文件加上几个请求并且把需要的功能全部实现模块化,可以让我们爬虫 ...

  6. List,Set,Map存取元素各有什么特点 hashMap、hashTable的区别 Arraylist和linkedList的区别

    1.List,Set,Map存取元素各有什么特点? 1.存放 (1)List存放元素是有序,可重复 (2)Set存放元素无序,不可重复 (3)Map元素键值对形式存放,键无序不可重复,值可重复 2.取 ...

  7. Android 自定义View (二)

    一.前言 上节 通过一个简单的旋转环对自定义view作了一个基本的认识,本文将大致讲解下实现的思路以及对该view的一些可能的改进. 二.思路 主要通过重写 view 中的 onDraw() 方法,利 ...

  8. python 编程找出矩阵中的幸运数字：说明，在一个给定的M*N的矩阵（矩阵中的取值0-1024，且各不相同），如果某一个元素的值在同一行中最小，并且在同一列中元素最大，那么该数字为幸运数字。

    假设给定矩阵如下: matrix=[[10,36,52], [33,24,88], [66,76,99]] 那么输出结果应为66(同时满足条件) 代码如下: arr=[[10,36,52], [33, ...

  9. nodejs 利用URL和querystring获取get查询参数

    为深入理解request的get url信息及参数传递,利用URL和querystring获取对应的信息,测试成功,记录如下: 1.编写server.js文件 http=require("h ...

  10. 艾思软件app开发公司帮您分析：开发一个APP多少钱？

    首先你要知道你所要开发的APP, 是不是已经成熟的相同的产品, 如果有的话那还是建议直接购买, 这种已经能满足你需求的成品APP价格会很便宜, 总成本一般也就1到2万的级别. 如果没有那就需要定制开发 ...