脚本化CSS

最新推荐文章于 2023-09-26 16:31:10 发布

@-@怎么去拥有一道彩虹

最新推荐文章于 2023-09-26 16:31:10 发布

阅读量80

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_31710345/article/details/115917862

版权

1.offsetWidth

//- 获取元素的宽度（content+padding+border）
//- 当元素隐藏的时候 获取不到offsetWidth
//- 当图片没有加载完成，并且没有设置width属性的时候，也获取不到
<div id="box">
        <div class="con">1</div>
</div>

var oBox = document.getElementById('box');
console.log(oBox.offsetWidth)

2.clientWidth

//- 获取元素的宽度（content+padding）
//- 当元素隐藏的时候 clientWidth
//- 当图片没有加载完成，并且没有设置width属性的时候，也获取不到
<div id="box">
        <div class="con">1</div>
</div>

var oBox = document.getElementById('box');
console.log(oBox.clientWidth)

3.scrollWidth

//获取元素包含内容的完整宽度
//返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分

4.offsetLeft,offsetParent,clientlefft

获取元素的偏移位置： 
  - 如果外层元素一直没有定位属性，则获取的是相对根元素的距离
  - 获取的是自己的边框外部到最近定位父级的边框内部的距离 
<style>
        #outer {
            width: 600px;
            height: 600px;
            background-color: red;
            border: 1px solid #000;
            margin: 100px;
            /* position: relative; */
        }
        #inner {
            width: 350px;
            height: 350px;
            background-color: yellow;
            border: 1px solid #000;
            margin: 80px;
            position: absolute;
        }
        #con {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border: 1px solid #000;
            margin: 70px;
        }
</style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <div id="con"></div>
        </div>
    </div>
    <script>
        /* 
offsetLeft:获取元素的偏移位置： 
     - 如果外层元素一直没有定位属性，则获取的是相对根元素的距离
     - 获取的是自己的边框外部到最近定位父级的边框内部的距离          offsetParent:获取最近定位父元素和祖先元素               
clientLeft:获取左边框的宽度        
        */
        var oCon = document.getElementById('con')
       	console.log(oCon.offsetLeft)//70
        console.log(oCon.clientLeft)//1
		console.log(oCon.offsetParent)
        /*  <div id="inner">
            <div id="con"></div>
        </div>  */

5.scrollLeft

设置和获取滚动条的位置  
获取的是滚动条到元素左边的距离
<button id="btn">点击</button>
    <div id="box">
        <div id="con"></div>
    </div>
        var oBox = document.getElementById('box');
        var oCon = document.getElementById('con');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            //获取
            // console.log(oBox.scrollLeft);
            //设置
            oBox.scrollLeft = 100;
        }

6.getBoundingClientRect()

获取一个元素到视口的距离,得到是一个对象
	-left属性：获取元素的左边缘到视口左边缘的距离
	- right属性：获取元素右边缘到视口左边缘的距离
	(right比left多了一个元素的宽度+padding+两个边框)
	- top和bottom是同理
	- width和height属性是（content+padding+border）
#box {
        width: 200px;
        height: 100px;
        background-color: red;
        margin: 300px;
        border: 1px solid #000;
        padding: 10px;
        }
    <div id="box"></div>
        var oBox = document.getElementById('box');
        console.log(oBox.getBoundingClientRect())
/*		DOMRect{
			bottom: 422
			height: 122
			left: 308
			right: 530
			top: 300
			width: 222
			x: 308   y: 300
			__proto__: DOMRect
}*/

7.获取系统滚动条的位置：

- IE9+:window.pageXOffset/window.pageYOffset
- IE6+:Html元素的scrollTop或者scrollLeft属性
- IE6:Body元素的scrollTop

8.设置系统滚动条：

- IE6+:给Html元素的scrollTop或者scrollLeft属性设置
- IE6:Body元素的scrollTop设置
- 全兼容：window.scrollTo(x,y):设置系统滚动条，x是横向 y是竖向

9.获取窗口的宽度和高度

<style>
 #box {
       height: 10000px;
 }
</style>
<body>
    <div id="box"></div>
    <script>
/* 
获取窗口的宽度和高度 其实使用的是body或者html的clientWidth和clientHeight
 - 在ie6及以下，认为根元素是body,所以用body的clientWidth
- 在非ie6情况下，认为根元素是html，所以使用的html的clientWidth    */       console.log(document.documentElement.clientHeight)
//兼容：
var winHeight = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winHeight)
</script>

10.client事件属性

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

在这里插入图片描述

@-@怎么去拥有一道彩虹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
脚本化CSS

1.offsetWidth//- 获取元素的宽度（content+padding+border）//- 当元素隐藏的时候获取不到offsetWidth//- 当图片没有加载完成，并且没有设置width属性的时候，也获取不到<div id="box"> <div class="con">1</div></div>var oBox = document.getElementById('box');console.log(oBox.
复制链接

扫一扫