dom的宽度

dom中的位置和宽度

内尺寸(不包含滚动条)
            clientHeight = content.height + padding.top + padding.bottom
            clientWidth = content.width + padding.right + padding.left
            clientTop = border.top
            clientLeft = border.left;
外尺寸
            offsetHeight = content.height + padding.top + padding.bottom+border.top+border.bottom;
            offsetWidth = = content.width + padding.right+ padding.left+border.right+border.left;
            offsetTop ="该元素的上边框的外缘"到"offsetParent的上边框的内边缘"的距离
            offsetLeft  ="该元素的左边框的外缘"到"offsetParent的左边框的内边缘"的距离
滚动尺寸
            scrollHeight;滚动区域的高度,如果不滚动,等价于clientHeight;
            scrollWidth;滚动区域的宽度,如果不滚动,等价于clientWidth;
            scrollTop;垂直方向滚动的距离
            scrollLeft;水平方向滚动的距离
            
            注:火狐和ie是不会计算padding.bottom和padding.right
             offsetParent,离元素最近的已经定位的父元素
             offsetTop和offsetLeft是基于该元素进行计算的

时间： 2024-11-11 23:57:58

dom的宽度的相关文章

Javascript 获取dom的宽度 随笔一

javascript 中 offsetWidth 获得的并不是 真实的宽度 不等于 style.width ;offetWidth 实际上获得的是物体的盒模型尺寸. 包括 border padding 等尺寸.obj.style.width 只能获得行间样式宽度,不能获得样式表中的样式中的宽度 获取不在行间宽度的方法 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; /*仅支持IE*

依赖jquery的select皮肤2

这个下拉菜单存在于body中,不会受select父级overflow的影响,同样依赖于jquery. 缺陷是如果select上的样式不是定义在class上的,不能完全获取select上的样式. 不过,皮肤的样式可以通过css来修改. 直接上代码: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>selec

select添加皮肤 jquery

由于select修改样式不能兼容浏览器,也不能随意修改,那么就需要模拟select,给select添加皮肤了,代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.8.2.min.js">

js实现轮播

在我们准备动手之前先了解下几个属性  dom元素的位置的几个相关属性 dom元素宽度/高度 clientWidth/clientHeight   元素的内尺寸   content + padding offsetWidth/offsetHeight  元素的外尺寸  content + padding + border clientLeft/clientTop  padding最外侧与border最外侧的距离  也就是左边的border宽度和上面的border宽度 offsetLeft/offs

小练习：元素的拖放

看到很多地方都用到了拖放,因此就自己尝试写了一个,刚开始以为很简单,结果到处都是陷阱. 不多说了,先放写好的程序,在来说说其中遇到的问题. 不过大家可以先自己写写,再来看可能效果更好. <!doctype html> <html> <head> <meta charset="utf-8"> <style> #drag{ position: fixed; top:100px; left: 100px; width: 100px;

html2canvas - 解决办法之图片跨域导致的截图空白

1. 后端支持:图片要是cdn上的地址,并且允许图片跨域,header头中设置应为 Access-Control-Allow-Origin:  * 2. 前端配置 1 var opts = { 2 scale: scale, // 添加的scale 参数 3 canvas: canvas, //自定义 canvas 4 logging: false, //日志开关,便于查看html2canvas的内部执行流程 5 width: width, //dom 原始宽度 6 height: height

Html2canvas - 项目中遇到的那些坑点汇总(更新中...)

水平居中的元素截图后向左跑偏 明明是水平居中的代码,截图出来的会偏左,结构是左图片右文字,有时候是图片自己跑到最左边,有时候是整体偏左一点点 这个问题也不是经常遇到,场景是父div元素text-align=center;内部两个子元素设为display:inline-block的模式.然后画图就会出现左边的div偏左靠或直接在左边的情况. 问题未解决,出现时也没研究因为啥,等有时间的时候就不出现了... 靠背景图露脸的dom们会有底线 截图时,如果有一个dom元素是用背景图填充的,里边没有任何结

零零散散的积累

在做项目时,会遇到一些小问题,现在趁空余时间把这些零散的问题给罗列一下,虽然都是找度娘看各位大神的解答,但是还是想都整理出来,一来给自己加个印象二来以便以后的运用. 1. 问题描述:IOS下,移动端的web页面中input获取焦点弹出系统虚拟键盘时,input框被虚拟键盘挡住了. 解决办法: (1) $('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function

CSS3总结四：盒模型（box）

盒模型:标准盒模型.混杂盒模型 什么时候会触发混杂模式? 为什么要混杂模式渲染规则盒模型? box-sizing:content-box.border-box 关于盒模型的一些其他样式和属性值 一.盒模型:标准渲染规则盒模型.混杂模式渲染规则盒模型 标准渲染模式盒模型的渲染规则:DOM.width = border-left-width + padding-left + width(content-width) + padding-right + border-right-width;(dom.