<!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. VAE with a VampPrior

    目录 概 主要内容 分级的VAE 代码 Tomczak J. & Welling M. VAE with a VampPrior. In International Conference on ...

  2. Python Revisited Day 09 (调试、测试与Profiling)

    目录 9.1 调试 9.1.1 处理语法错误 9.1.2 处理运行时错误 9.1.3 科学的调试 9.2 单元测试 9.3 Profiling 9.1 调试 定期地进行备份是程序设计中地一个关键环节- ...

  3. 使用.NET 6开发TodoList应用(17)——实现数据塑形

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...

  4. Count Sequences

    \(考虑问题的转换,即把用n个球,分为r-l+2个部分,其中第1部分表示该区域的球值为l,第二部分表示该区域的球值为l+1\) \(......第r-l+2部分为不选该区域的球\) \(该问题等价于在 ...

  5. python 日志logging设置按天进行保存，保存近7天，过期日志自动清理

    参考文章(写的很详细):https://www.cnblogs.com/xujunkai/p/12364619.html 前言: 跑接口自动化或者其他程序运行时,如果只能保存一份log文件,可能会存在 ...

  6. java字符串比较是否都可直接使用==？

    java字符串比较,两个字符串相不相等,直接用==来判断可以吗?或者判断两个字符串不相等,直接用!=? 不能 两个对象进行比较,如果使用==符号,那么比较的是这两个对象的"引用"( ...

  7. [未完] Linux 4.4 USB —— spiflash模拟usb大容量存储设备 调试记录 Gadget Mass Stroage

    linux 4.4 USB Gadget Mass Stroage 硬件平台: licheepi nano衍生 调试记录 驱动信息 │ This driver is a replacement for ...

  8. 【刷题-PAT】A1108 Finding Average （20 分）

    1108 Finding Average (20 分) The basic task is simple: given N real numbers, you are supposed to calc ...

  9. 【刷题-PAT】A1101 Quick Sort （25 分）

    1101 Quick Sort (25 分) There is a classical process named partition in the famous quick sort algorit ...

  10. Cesium中文网——如何开发一款地图下载工具[一]

    Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium中文网的朋友们的其中一个主题是:自己独立开发一款地图 ...