<!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. React之一个组件的诞生

    此处以input组件为例 input.js import React from 'react' class Input extends React.Component { // ps:使用static ...

  2. xml与DataSet互转

    //将DataSet转换为xml字符串   public static string ConvertDataSetToXMLFile(DataSet xmlDS, Encoding encoding) ...

  3. 关于FPGA学习的疑惑

    记录心路历程--第一次真正意义上的找工作. 最近在学习小梅哥的FPGA的过程中,总是学习着前面的东西忘着后面的,进行了过一次复习,我准备是在每个章节学完之后,再复习之前的章节,可这样是真的很耗费时间. ...

  4. 小梅哥课程学习——串口发送应用之发送数据（适用于板级验证，时间间隔位100ms）

    //此代码的注意事项,首先这个代码不能仿真成功会出现一定的时间延迟, //因为在做板级验证的时候把时间改成了100ms发送一次,要想仿真成功,把时间改成499999 //使用上一节课设计的发送模块,设 ...

  5. error：Visual Studio 2012.4, “Run As Administrator” -> “The application cannot start”

    复制所有 dte*.olb 文件 从C:\Program Files (X86)\Common Files\Microsoft Shared\MSEnv   到 C:\Program Files X8 ...

  6. tail 命令 没有内容输出，记录一种解决

    1. 没有内容输出的命令: tail - f /test/platform/jtimer.log 控制台: 2. 当切换到此文件的当前路径后才有: 使用: tail - f jtimer.log

  7. echarts 玫瑰图+中间文字

    option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, title: { text: ...

  8. Tutorial_WorkflowProcessor usage in AX 2012

    Check under system administration if the BC proxy and workflow excecution account are still valid. C ...

  9. C++ || 用类 写交换函数 ||函数指针传递

    点击查看代码 #include <iostream> using namespace std; void swap(int* a,int* b) //函数参数为指针形式 { int p = ...

  10. SQL Network Interfaces, error: 50 - 发生了 Local Database Runtime 错误。无法创建自动实例

    1. sqllocaldb delete MSSQLLocalDB 2. sqllocaldb create