<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    body {

      margin: 0;

    }

    #box {

      width: 100px;

      height: 100px;

      margin: 50px;

      border: 30px solid red;

      padding: 10px;

      background-color: green;

    }

  </style>

</head>

<body>

  <div id="box">

  </div>

  <script>

    // client

    var box = document.getElementById('box');

    // clientLeft  是border-left 的宽度

    // clientTop    border-top 的宽度

    console.log(box.clientLeft);

    console.log(box.clientTop);

    // 获取大小   包括padding  但是不包括边框

    console.log(box.clientWidth);

    console.log(box.clientHeight);

    // offsetWidth   offsetHeight     包括padding和边框

  </script>

</body>

</html>

bom-client的更多相关文章

  1. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  2. 《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/30255899     数据构成了web网站的 ...

  3. 从零开始学 Web 之 BOM（四）client系列

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 《Javascript权威指南》学习笔记之十八：BOM新成就（1）--client存储数据（Web SQL DataBase实现）

    使用本地存储和会话存储能够实现简单的对象持久化,能够对简单的键值对或对象进行存储.可是,对于比較复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Databas ...

  5. python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)

    04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  6. bom中的offset,client,scroll

    简单明了

  7. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  8. 解读BOM与COM

    概念: 1.BOM(Browser Object Model): 浏览器对象模型,从名字上就能知道它和浏览器关系密切. 浏览器的非常多行为是通过JavaScript控制的.比如打开新窗体.打开关闭标签 ...

  9. 《Javascript权威指南》十六学习笔记：BOM资源---BOM基本应用

    BOM基本应用包括:管理浏览器历史记录.得到处理和解决浏览器的信息.本文介绍了这些应用程序. 一.浏览历史管理 1.history对象的方法和属性 History 对象包括用户(在浏览器窗体中)訪问过 ...

  10. StreamWriter(ms, new UTF8Encoding(false))可以达到不输出BOM的需求。

    winform 通过webservice向服务器提交图片需要注意的地方 最近一个winform项目中需要通过拍照或者上传本地文件或者截图的方式把产品图片上传到服务器,最后选择了服务器部署webserv ...

随机推荐

  1. Augmentation For GAN

    目录 概 主要内容 Differentiable Augmentation Adaptive Augmentation 代码 Zhao S., Liu Z., Lin J., Zhu J. and H ...

  2. 求最大公因数和最小公倍数（C++实现）

    求两个正整数之最大公因子的算法(辗转相除法) 最大公约数是指能同时整除它们的最大正整数 基本原理:两个数的最大公约数等于它们中较小的数和两数之差的最大公约数. 就如有 a = 122, b =  54 ...

  3. Linux学习笔记-韩顺平

    这是我学习哔哩哔哩UP主韩顺平的2021韩顺平图解Linux课程的学习笔记. 课程地址:2021韩顺平图解Linux课程 Linux基础篇-Linux目录结构 基本介绍 linux 的文件系统是采用级 ...

  4. [平台建设] Spark任务的诊断调优

    背景 平台目前大多数任务都是Spark任务,用户在提交Spark作业的时候都要进行的一步动作就是配置spark executor 个数.每个executor 的core 个数以及 executor 的 ...

  5. Java初学者作业——使用eclipse简单的输出（打印）游戏菜单

    返回本章节 返回作业目录 需求说明: 使用eclipse创建Java项目,在Java程序中输出游戏菜单. 为 Java 程序添加单行和多行注释. 实现思路: 在 eclipse 中创建项目及Java类 ...

  6. C#读取注释的方法

    友好的注释能提高代码的可读性,几乎所有的编程语言都支持注释. 在C#中,注释不是可执行代码的一部分,因此注释不会被编译到程序集中去,但是我们可以提取注释[右键项目]-[属性]-[生成]-[输出]-[X ...

  7. linux 之 导出远程oracle数据库表结构及数据

    导出用户下所有表结构及数据 exp 用户名/密码@ip/数据库 file=文件路径/文件名.dmp owner='用户' 导出用户下所有表结构,不导出数据 exp 用户名/密码@ip/数据库 file ...

  8. Nginx_安装配置

    一.安装gcc依赖库 检查是否安装(linux默认是安装了的) gcc –version  

  9. 手机访问web网页，使得显示自适应

    //禁止浏览器伸缩<meta name="viewport" content="user-scalable=0">//手机访问web网页,使得显示自 ...

  10. nuxt中报window is not defined

    1.如果是引用插件报错的话,原因是在服务端渲染时找不到window,这样在插件引入位置把ssr设置为false即可. plugins: [ { src: '@/plugins/iview', ssr: ...