<!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. Estimation of Non-Normalized Statistical Models by Score Matching

    目录 概 主要内容 方法 损失函数的转换 一个例子 Hyv"{a}rinen A. Estimation of Non-Normalized Statistical Models by Sc ...

  2. Stirling's Formula

    目录 Stirling's Formula Keith Conrad. Stirling's Formula. Stirling's Formula \[\lim_{n \rightarrow \in ...

  3. JavaScript实现简单的打字游戏

    完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694 演示地址:https://url_777.gitee.io/typ ...

  4. 使用.NET 6开发TodoList应用(16)——实现查询排序

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 关于查询的另一个需求是要根据前端请求的排序字段进行对结果相应的排序. 目标 实现根据排序要求返回排序后的结果 原理与思路 要实 ...

  5. Linux下设置普通用户使用sudo命令

    1.登录root用户 2.增加root用户对文件sudoers的写权限 chmod u+w /etc/sudoers 3.编辑sudoers,把用户mysql添加进去 vi /etc/sudoers ...

  6. [ vue ] 自定义组件的 v-model 理解

    需求场景描述: 1. 在父组件 myself.vue 里面定义数据 button_val 2. 在父组件 myself.vue.里面定义按钮,它的功能是吧 button_val  的值 -1 ---- ...

  7. 简单谈谈 TCP/IP

    1.前言 IP 或 ICMP.TCP 或 UDP.TELNET 或 FTP.以及 HTTP 等都属于 TCP/IP 协议. 他们与 TCP 或 IP 的关系紧密,是互联网必不可少的组成部分.TCP/I ...

  8. mysql数据库读写分离教程

    注意:实现MySQL读写分离的前提是我们已经将MySQL主从复制配置完毕    一.Mycat实现读写分离安装和配置 架构规划: 192.168.201.150 master 主节点 192.168. ...

  9. Python的内存管理和垃圾回收机制

    内存管理 Python解释器由c语言开发完成,py中所有的操作最终都由底层的c语言来实现并完成,所以想要了解底层内存管理需要结合python源码来进行解释. 1. 两个重要的结构体 include/o ...

  10. elasticsearch之拼音搜索

    拼音搜索在中文搜索环境中是经常使用的一种功能,用户只需要输入关键词的拼音全拼或者拼音首字母,搜索引擎就可以搜索出相关结果.在国内,中文输入法基本上都是基于汉语拼音的,这种在符合用户输入习惯的条件下缩短 ...