Element.clientWidth

Element.clientWidthElement.clientWidth

大家好,又见面了,我是你们的朋友全栈君。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth


<style>
    * {
        padding: 0;
        margin: 0;
    }
    #div {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 5px solid lightgreen;
        margin: 20px;
        background: lightskyblue;
    }
</style>
<div id="div"></div>

Element.clientWidth


clientWidth和clientHeigh  clientTop和clientLeft

  • clientWidth = width+左右padding
  • clientHeigh = height + 上下padding 

  • clientTop = boder.top(上边框的宽度)
  • clientLeft = boder.left(左边框的宽度)
const div = document.getElementById("div");
console.log("clientWidth: " + div.clientWidth);
console.log("clientHeight: " + div.clientHeight);
console.log("clientTop: " + div.clientTop);
console.log("clientLeft: " + div.clientLeft);

 Element.clientWidth


 

offsetWidth和offsetHight  offsetTop和offsetLeft

  • offsetWidth = width + 左右padding + 左右boder
  • offsetHeith = height + 上下padding + 上下boder
  • offsetTop:当前元素上边框外边缘到最近的已定位父级(offsetParent) 上边框内边缘的距离。如果父级都没有定位,则分别是到body顶部和左边的距离
  • offsetLeft:当前元素左边框外边缘到最近的已定位父级(offsetParent) 左边框内边缘的距离。如果父级都没有定位,则分别是到body 顶部和左边的距离

 


https://blog.csdn.net/qq_42089654/article/details/80515916 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163016.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • httprunner(2)下载安装[通俗易懂]

    httprunner(2)下载安装[通俗易懂]环境要求HttpRunner是一个基于Python开发的测试框架,可以运行在macOS、Linux、Windows系统平台上。这里使用macOS系统进行演示对于python版本要求:py

  • CSS3选择器 | 每个前端开发者必须要掌握的技术

    CSS3选择器 | 每个前端开发者必须要掌握的技术目录属性选择符伪类选择符CSS3属性CSS3自适应属性选择符如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式完全可以使用属性选择器来实现。E[att]{}:选择具有att属性的E元素E[att=”val”]{}:选择具有att属性且属性值等于val的E元素E[att~=”val”]{}:用于选取属性值中包含指定词汇的元素E[att|=”val…

  • Flicker-detect Sensor_sensorless sensing

    Flicker-detect Sensor_sensorless sensingSensor在日光灯作为光源下获取图像数据时会产生flicker,其根本原因是照在不同pixel上光能量不同产生的,所接受的光能量的不同也就是图像的亮度的不同。电源的频率有两种标准:50Hz(大陆)和60Hz(台湾、日本)的正弦波形,当然能量是没有方向性的,因此对应的能量是一个频率为100Hz和120Hz的波形,如下图1所示:图1、60Hz电源频率及能量波形      由于能量在时间…

    2022年10月13日
  • html使用toast弹窗,jQuery常用工具之message和toast弹窗插件「建议收藏」

    html使用toast弹窗,jQuery常用工具之message和toast弹窗插件「建议收藏」常用工具message和toast弹窗图片预览常用工具message和toast弹窗浏览器适配支持Chrome所有版本支持Firefox所有版本支持Safari所有版本不支持IE任何版本常用工具message和toast弹窗使用教程默认调用:alert(‘请打开麦克风’)支持多参数:alert({title:’我是标题’,content:’请打开https://huajiakeji.com/’…

  • pytest的assert_assert中文

    pytest的assert_assert中文前言断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了。什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试failed

  • PHP运行模式

    PHP运行模式

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号