<!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. 反序列化 sqlserver 中的 sysdiagrams,找到其中包含的表的信息

    转载于:Script SQL Server 2005 diagrams to a file - CodeProject /** <summary> Based on ufn_Varbina ...

  2. QPushButton与Enter相链接

    ui->pushButton_login->setFocus(); // 设置默认焦点 ui->pushButton_login->setShortcut(QKeySequen ...

  3. 一招彻底解决——双系统下windows时间错误显示

    双系统下windows与ubuntu系统时间不同步 我的笔电是windows系统,工作需要安装了ubuntu,于是成为双系统,于是从18年我就遇到了装了ubuntu系统之后windows时间显示错误的 ...

  4. centos7安装ffmpeg shell脚本

    #!/bin/sh # # Date: 2021-04-28 # Author: yb # Description: 安装ffmpeg # 检测当前用户是否为root [ $(id -u) != &q ...

  5. linux 串口查看信息

    查看串口是否可用,可以对串口发送数据比如对com1口,echo helloworld >/dev/ttyS0 [root@H3LINUX90 ~]# echo helloworld >/d ...

  6. 【SQL】数据库日志文件过大 4条命令删除日志

    USE DATATABLE GO ALTER DATABASE DATATABLE SET RECOVERY SIMPLE DBCC SHRINKFILE (DATATABLE_Log, 1) ALT ...

  7. Q:su命令切换用户无法使用,被拒绝

    su命令切换用户无法使用,被拒绝 问题描述 su 命令报错 su: Permission denied 如下图: su 命令 报错 su: Permission denied,不管是su普通用户还是r ...

  8. 多线程post

    async Task<long> post() { var stopwatch = new Stopwatch(); stopwatch.Start(); var client = new ...

  9. vue input有值但还是验证不通过

    验证失败原因: 因为input自动把输入的值转换为string类型,导致验证失败. 解决方案: 一. Input中的v-model改为v-model.number: 二.rules里面需要加type: ...

  10. echarts数据过小,log类型无法出现刻度线,并将y轴转为科学计数法

    方法仅供参考 可以更改logBase的值,数值越小刻度线越多,但也会出现,刻度值重复的问题,看各自需要,其次是对数据进行处理,全部变成大于1的数,最后在echarts的图表显示设置中更改回来 注意:对 ...