js脚本化css

幸运号

脚本化CSS

我们刚讲过如何获取和设置行内样式的值,但是我们开发不会所有样式都写在行内,同时js没法获取内嵌样式表和外部样式表中的值.
事实上DOM提供了可靠的API，得到计算后的样式。
1. 获取计算样式表

只读，不可写
获取的值是计算后的绝对值，不是相对值

window.getComputedStyle(ele,null).attr IE8以上
ele.currentStyle IE8及其以下

例子:

1. window.getComputedStyle(ele).attr
2. // 当然window是可以省略的
3. getComputedStyle(ele).attr

复制代码

好用的东西，一定不兼容。所以IE6、7、8不兼容
附加在元素身上的currentStyle属性，它表现和style点语法一样，使用驼峰式访问
例子

1. oDiv.currentStyle.width

复制代码

之前讲过,点操作符必须符合标识符的规范,所以使用点操作符获取有连字符的属性要写成驼峰式

1. getComputedStyle(oDiv).backgroundColor;
2. oDiv.currentStyle.backgroundColor;

复制代码

中括号操作符,因为中括号内写字符串,所以不用遵循标识符规范,就可以保留连字符的写法

1. getComputedStyle(oDiv)['background-color'];
2. oDiv.currentStyle['background-color'];

复制代码

颜色值在高级浏览器中是rgb()格式，低级浏览器中就是原样输出。
示例:

封装getStyle(dom,attr)兼容性

实际上，老司机都不这么做。我们不关心你的版本是什么，我只关心你的能力。

1. function getStyle(ele,attr){
2.         if(window.getComputedStyle){
3.                 return getComputedStyle(ele)[attr];
4.         }else{
5.                 return ele.currentStyle[attr];
6.         }
7. }
9. function getStyle(dom,attr){
10.         if(dom.currentStyle){  // IE8 及其一下
11.                 return dom.currentStyle[attr]
12.         }else{
13.                 return getComputedStyle(dom,null)[attr]
14.         }
15. }

复制代码

现在我们要在一个轮子，就是封装一个函数，这个函数接收两个参数，第一个是对象，第二个是属性名。

1. getStyle(obj,”padding-left”);
2. getStyle(obj,”paddingLeft”);

复制代码

这个函数返回的是这个属性值的计算后的样式。更牛逼的是，我们无论用户输入的是驼峰还是非驼峰，都让这个函数鲁棒。
2. 操作元素样式

我们知道前面学过了如果设置样式通过行内style来设置元素样式,
那么我们就可以通过获取计算样式值,然后修改

1. var oBox = document.getElementById('box');
2. var wid = parseInt(getStyle(oBox,'width'));
3. oBox.onclick = function(){
4.         wid += 20;
5.         console.log(wid);
6.         oBox.style.width = wid + 'px';
7. }

复制代码

3. 快捷位置和尺寸

DOM已经提供给我们计算后的样式，但是还觉得不方便，所以DOM又提供给我们一些API：
获取元素的显示尺寸(数字类型的值)

ele.offsetWidth width+左右padding+左右border
ele.offsetHeight height+上下padding+上下border
ele.offsetLeft 水平距离 (常用)
ele.offsetTop 竖直距离 (常用)
ele.clientWidth width+左右padding (常用)
ele.clientHeight height+上下padding (常用)
dom.clientLeft 上边框的width (可不记)
dom.clientTop 左边框的width (可不记)

3.1. offsetWidth和offsetHeight

全线兼容，是自己的属性，和别的盒子无关。
一个盒子的offsetWidth值就是自己的 width+左右padding+左右border的宽度(说白就是盒子的大小)
总结一下，全线兼容。
3.2. offsetLeft属性和offsetTop

这两个属性的兼容性非常差，不要着急，我们慢慢来看。

IE9、IE9+、Chrome等高级浏览器：

一个元素的offsetLeft值，就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离
每一个元素，天生都有一个属性，叫做offsetParent

就是自己祖先元素中，离自己最近的已经定位的元素，如果自己的祖先元素中，没有任何盒子进行了定位，那么offsetParent对象就是body。

1. op.offsetParent;  // 查找离自己最近的定位父级

复制代码

无论这个盒子自己是否定位，自己的offsetParent就是按照上述方法寻找。
IE6、IE7：

IE6、7的offsetParent对象是谁，和高级浏览器有非常大的不同。
情形1：自己如果没有定位属性，那么自己的offsetParent对象就是自己的祖先元素中离自己最近的有width或者有height的元素：

1.           → 你好，我有宽度 , offsetParent
2.                  → 你好，我没有宽高
3.                         <p></p>   → 你好，我没有定位
4.                
5.        

复制代码

情形2：自己如果有定位属性
那么自己的offsetParent就是自己祖先元素中离自己最近的有定位的元素。

1.        
2.                  → 你好，我没有宽高，有定位  , offsetParent
3.                         <p></p>   → 你好，我没有定位
4.                
5.        

复制代码

数值就是自己的左外边框到offsetParent对象的左内边框的值。
IE8：

IE8的offsetParent是谁呢？和高级浏览器一致：
无论自己是否定位，自己的offsetParent就是自己祖先元素中，离自己最近的已经定位的元素。
这一点，没有任何兼容问题！
兼容性解决办法，不是能力检测，也不是版本检测，而是善用这个属性，要确保属性的使用条件：
这样的话，所有浏览器的值都是一样的，offsetLeft、offsetTop值是number类型的，可以直接参与运算，不需要parseInt()
3.3. clientWidth和clientHeight

clientWidth就是自己的width+padding的值。 也就是说，比offsetWidth少了border。
如果盒子没有高度，用文字撑的，IE6 clientHeight是0，其他浏览器都是数值。
以上6个属性要铭记于心，就offsetLeft、offsetTop比较闹腾，但是合理使用，也没兼容问题了
3.4. clientLeft和clientTop

这两个属性没有太大的意义就是上边框和左边看的宽度而已
4. 获取元素的有定位属性的父级

ele.offsetParent
如果没有定位父节点，则返回body

封装getElementPosition函数,获取元素相对于文档的坐标

1. function getElePos(dom){  // 获取元素相对于文档的坐标
2.         var x = dom.offsetLeft;
3.         var y = dom.offsetTop;
4.         var parent = dom.offsetParent;
5.         while(parent !== null){
6.                 x += parent.offsetLeft;
7.                 y += parent.offsetTop;
8.                 parent = parent.offsetParent;
9.         }
10.         return {
11.                 x: x,
12.                 y: y
13.         }
14. }

复制代码

5. 获取元素的滚动值

5.1 获取滚动元素的宽高

当元素实际内容超过设置的内容时

dom.scrollWidth ==> 元素实际内容的width
dom.scrollHeight ==> 元素实际内容的height

5.2 获取元素的滚动距离(数字类型的值)

dom.scrollLeft 滚动的水平距离
dom.scrollTop 滚动的竖直距离

5.3 滚动距离的兼容写法

• 获取滚动条的滚动距离 IE8以上
  

window.pageXOffset 页面滚动的水平距离
window.pageYOffset 页面滚动的竖直距离

• 获取滚动条的滚动距离 IE8及其以下
  

document.documentElement.scrollLeft IE7,8
document.documentElement.scrollTop IE7,8
document.body.scrollLeft
document.body.scrollTop
在IE8以上兼容性比较混乱,在使用时两个值相加，因为这两对值不能同时存在

封装getScrollOffset兼容性函数

1. function getScrollOffset(){
2.         if(window.pageYOffset){
3.                 return {
4.                         x: window.pageXOffset,
5.                         y: window.pageYOffset
6.                 }
7.         }else{
8.                 return {
9.                         x: document.documentElement.scrollLeft + document.body.scrollLeft,
10.                         y: document.documentElement.scrollTop + document.body.scrollTop;
11.                 }
12.         }
13. }

复制代码

6. 获取浏览器窗口的尺寸

IE8以上

window.innerWidth 窗口的宽度(包含滚动条)
window.innerHeight 窗口的高度(包含滚动条)

IE8及其以下

1. document.documentElement.clientWidth 标准模式下
2. document.documentElement.clientHeight
4. (在Chrome,Firefox,IE7,IE8不包含滚动条,在IE8以上包含滚动条)
6. document.body.clientWidth 怪异模式下
7. document.body.clientWidth

复制代码

检测浏览器是不是在怪异模式下

1. dowument.compatMode === 'BackCompat'

复制代码

封装getViewportOffset兼容性函数

1. function getViewportOffset(){
2.         if(window.innerWidth){  
3.                 return {
4.                         x: window.innerWidth,
5.                         y: window.innerHeight
6.                 }
7.         }else{
8.                 if( document.compatMode === 'BackCompat'){
9.                         return {
10.                                 x: document.body.clientWidth,
11.                                 y: document.body.clientHeight
12.                         }
13.                 }else{
14.                         return {
15.                                 x: document.documentElement.clientWidth,
16.                                 y: document.documentElement.clientHeight
17.                         }
18.                 }
19.         }
20. }

复制代码

7. 设置滚动条的滚动距离

浏览器页面滚动

1. window.scrollTo(x,y) 让滚动条滚动到指定位置
3. window.scrollBy(x,y) 让滚动条滚动指定距离

复制代码

页面元素滚动

1. ele.scrollTo(x,y)
3. ele.scrollBy(x,y)

复制代码

来源:https://www.cnblogs.com/xw-01/p/18266103
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！