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)


相关推荐

  • 电脑预览,电脑怎么预览psd格式?[通俗易懂]

    电脑预览,电脑怎么预览psd格式?[通俗易懂]经常使用PS的朋友们都知道Photoshop文档的默认格式是psd格式,可是在电脑上可能不能像jpg图片一样显示缩略图预览。遇到这种情况我们该怎么办?要是电脑上并没有安装PS软件又该怎么预览?下面我们就一起来看看哪些解决方法。步骤如下:方法一:有安装PS,使用PS软件预览。1.首先双击桌面的PS软件,等待进入PS,如图所示。2.进入PS初始界面,将你需要预览psd格式图片打开,就可以在软件中看到图…

  • 来自damon的zencart二次开发教程-3.2复制模板(仿站)操作教程「建议收藏」

    来自damon的zencart二次开发教程-3.2复制模板(仿站)操作教程「建议收藏」用zencart来复制别人的网站成本低,效率高。前面我发了一篇有关开发自己的zencat模板的文章(《来自damon的zencart二次开发教程-3.1开发自己的zencart模板》),里面只有一些基础的理论,下面,我们就来实际操作一下。1.利用离线浏览器将(《离线浏览器Teleport_Pro完全教程与安装文件下载》)你的目标网页文件(图片,html以及css样式表,j…

  • 数字电路实验环境 (Quartus II 9.0)

    数字电路实验环境 (Quartus II 9.0)大家好,我是孙不坚1208,记录一下数字电路这门课的实验环境((QuartusII9.0))安装。所需文件网盘链接:https://pan.baidu.com/s/1VnCc4wR7HAOgxfyWjoUHjw提取码:0kjq安装教程仅限于学习,安装前先关闭各类杀毒软件,注意安装路径不能有中文,存放安装包的路径最好也不要有中文。我们首先在c盘建好相应的文件目录,然后进行安装在此目录下。一、安装QuartusII9.0等它稍微加载,出现下面这个界面。这里进行安装,无脑点击下一步

  • pycharm使用python_pycharm和pytorch区别

    pycharm使用python_pycharm和pytorch区别本小节只讲如何通过pycharm使用pytorch,pytorch的详细安装点击这里https://blog.csdn.net/huang_shao1/article/details/82958551anaconda的详细安装点击这里https://blog.csdn.net/huang_shao1/article/details/82958615如图所示,我们编辑好了自己pytorch项…

  • dm368流程_dm code

    dm368流程_dm codehttp://www.ahcit.com/?p=4038

  • 向量的内积例题_python求向量的模

    向量的内积例题_python求向量的模有两个向量v1=(x1,x2,…,xnv_1=(x_1,x_2,…,x_n和v2=(y1,y2,…,yn)v_2=(y_1,y_2,…,y_n),允许任意交换v1v_1和v2v_2各自的分量的顺序,计算v1v_1和v2v_2的内积x1y1x2y2…xnynx_1y_1x_2y_2…x_ny_n的最小值样例:输入:n=3v1=(1,3,−5)v_1

发表回复

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

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