<!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. matplotlib 进阶之origin and extent in imshow

    目录 显示的extent Explicit extent and axes limits matplotlib教程学习笔记 import numpy as np import matplotlib.p ...

  2. 更新系统为High sierra 后无法使用Cocoapods

    sudo gem update --system sudo gem install -n /usr/local/bin cocoapods执行完就可以直接用了.

  3. Cython编译动态库、引用C/C++文件

    将某些.py 编译成动态库 设置好要编译的module们: compile_to_c_modules = [ 'package.module' ] 将它们转换成cythonize可识别的参数: def ...

  4. springboot单元测试为什么排除junit-vintage-engine

    https://blog.csdn.net/Ber_Bai/article/details/117001443 如果不排除,就需要使用@RunWith注解? 25-springboot整合单元测试指定 ...

  5. 数学库Sage安装和使用

    什么是Sage? Sage是免费的.开源的数学软件,支持代数.几何.数论.密码学.数值计算和相关领域的研究和教学. 可以简单看成一个数学库 下载 国内地址 安装 Windows下安装 下载安装程序即可 ...

  6. hadoop 之 nodemanager自动关闭（Secure IO is not possible without native code extensions）

    场景 安装好hadoop之后,nodemanager自动关闭.查看日志如下: java.lang.ExceptionInInitializerError at org.apache.hadoop.ya ...

  7. minio + kkFileView 实现在线预览

    minio上传的pdf之类文件不支持预览,地址在浏览器访问时会直接下载,现在搭配kkFileView文件预览 1.minio查看之前的安装方式 2.kkFileView安装 docker方式 1.拉取 ...

  8. python的作用域、globals()-全局变量 和 locals()-局部变量

    在python中,函数会创建一个自己的作用域,也称为为命名空间.当我们在函数内部访问某个变量时,函数会优先在自己的命名空间中寻找. 我们自己定义的全局变量均在python内建的globals()函数中 ...

  9. Anaconda3+CUDA10.1+CUDNN7.6+TensorFlow2.6安装（Ubuntu16）

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. 403 Invalid CORS request 跨域问题 invalid+cors+request什么意思

    5.跨域问题 跨域:浏览器对于javascript的同源策略的限制 . 以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 ...