3.2 脚本化CSS

时间：2022-03-05 08:45:16

3.2 脚本化CSS

1. 元素节点.style ==> 获取行内样式表 （一般设置）

　　　dom.style.attr    atrr 表示属性的意思

* 可读可写，一般使用行内样式表来设置某些css属性

* 含有连词符“-”的css属性 需要使用小驼峰写法

* float是js里面的保留字 一般使用cssFloat

* 复合属性拆分成单一属性

* 设置的值要求是字符串形式

 

比如有一个变量为：myfirstname

小驼峰命名规则：第一个单词小写，其他单词首字母大写

写法如：myFirstName

大驼峰命名规则：第一个单词大写，其他单词首字母也大写

写法如：MyFirstName

 

var aa = oBox.style.width="300px" //写 可通过“.”或者[""]查询对象的属性

var bb = oBox.style.width //读

oBox.style.backgroundColor = 'lightblue';

console.log(aa,bb)

 

2. 获取计算样式表  IE8以上 （只能获取）

　　① window.getComputedStyle(dom,null).attr

* 获取的是计算样式表（computed面板 属性名和属性值组成的对象）

* 一般计算样式表用来获取css属性

* null可以换成after或者before 这样能够获取伪元素的计算样式表

* 只读，不可写

例：window.getComputedStyle(oBox,'after').height

 

② dom(元素节点).currentStyle IE8以下

例：oBox.currentStyle.width

获取的数值是字符串，可以用parseFloat变成数字

 

2.1封装getStyle(dom,attr)兼容性函数

3.2 脚本化CSS3.2 脚本化CSS 
#box{ width:200px; height:100px; background-color: pink; } <div id="box">

</div>
    var oBox = document.getElementById('box') //获得标签
 function getStyle(dom,attr){ return dom.currentStyle[attr] }else{ //IE8以上
        return window.getComputedStyle(dom,null)[attr] } } getStyle(oBox,'width')
View Code

3.2 脚本化CSS

 

window.getComputedStyle(dom,null) 获取oBox这个计算样式表

计算样式表是对象，所以我们获取对象的属性，而且这个属性名为变量attr,所以用[]存着一个变量来获取该属性名的属性值，对象的属性名是字符串

 

3.获取元素的显示（实际）尺寸 　　只能读取不能设置  获取的是数字类型

dom.clientWidth ==> width+左右padding (常用)

dom.clientHeight ==> height+上下padding (常用)

dom.offsetWidth ==> width+左右padding+左右border

dom.offsetHeight ==> height+上下padding+上下border

 

当元素实际内容超过设置的内容时只能读取不能设置

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

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

 

4.获取元素到有定位属性的父级距离 只能读取不能设置

dom.clientLeft 左边框的width (可不记)

dom.clientTop 上边框的width (可不记)

dom.offsetLeft 水平距离 (常用) 获取dom到定位父级的水平距离

dom.offsetTop 竖直距离 (常用)

dom.scrollLeft 滚动的水平距离

dom.scrollTop 滚动的竖直距离

 

5.获取元素的有定位属性的父级

dom.offsetParent

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

 

 6. 封装getElementPosition函数,获取元素相对于文档(浏览器)的坐标

3.2 脚本化CSS3.2 脚本化CSS 
#box{ position: absolute; top: 30px; left: 50px; width: 300px; height: 300px; background-color: skyblue; } #mid{ position: absolute; top: 30px; left: 40px; width: 200px; height: 200px; background-color: pink; } <div id="box">gfdgf <div id="mid">sd</div>
</div>
    var oBox = document.getElementById('box') //获得标签
    var omid = document.getElementById('mid') //获得标签
 function getElementPosition(dom){ if(dom.offsetParent===document.body){ return { x:dom.offsetLeft, y:dom.offsetTop } }else{ return { x:dom.offsetLeft+getElementPosition(dom.offsetParent).x, y:dom.offsetTop+getElementPosition(dom.offsetParent).y //获取dom到定位父级的水平/垂直距离+该级的爸爸到浏览器边缘的距离 //执行getElementPosition()这个函数是为了得到box,返回一个对象，用.获取该属性
} } } getElementPosition(omid)
View Code

 3.2 脚本化CSS

 

7.获取滚动条的滚动距离 IE8以上

　　window.pageXOffset 　　获取页面滚动的水平距离

　　window.pageYOffset 　　获取页面滚动的竖直距离

获取滚动条的滚动距离  IE8及其以下，谷歌浏览器会兼容

　　document.documentElement.scrollLeft

　　document.documentElement.scrollTop

 

　　document.body.scrollLeft

　　document.body.scrollTop

在IE8以上兼容性比较混乱,在使用时两个值相加，因为这两对值不能同时存在

两个互斥，加号前面有数值，后面为0，反之一样

即document.documentElement.scrollLeft+document.body.scrollLeft

 

8.封装getScrollOffset兼容性函数（不是重点）

3.2 脚本化CSS3.2 脚本化CSS
//如果是谷歌IE8或以上,有数字记录着，那if就为真，走进循环
//当数值为0的时候，走不就if，会走else，但是谷歌会向下兼容
//若要当0时候走进谷歌，就加一个条件给他 
function getScrollOffset(){
if(window.pageXOffset==0 || window.pageXOffset){ 
return { 
x:window.pageXOffset,
y:window.pageYOffset
}
}else{ //如果是IE8以下
return {
x:document.documentElement.scrollLeft+document.body.scrollLeft,
y:document.documentElement.scrollTop+document.body.scrollTop
}
}
}
console.log(getScrollOffset())
View Code

3.2 脚本化CSS

 

 

9.获取浏览器窗口的尺寸 IE8以上   在ie8以下没有数值

　　window.innerWidth 　　窗口的宽度

　　window.innerHeight 　　窗口的高度

获取浏览器窗口的尺寸   IE8及其以下

　标准模式下↓

　　document.documentElement.clientWidth 

　　document.documentElement.clientHeight

 兼容模式下(有<!DOCTYPE html>为开启)

　　document.body.clientWidth  

　　document.body.clientWidth

　　document.compatMode查询是什么模式,兼容为"CSS1Compat"，标准为"BackCompat"

 

11.封装getViewportOffset兼容性函数  （不是重点）

 

3.2 脚本化CSS3.2 脚本化CSS
/*函数执行后返回{w:浏览器宽度,h:浏览器高度}*/
function getViewportOffset(){
if(window.innerWidth){ //IE8以上
return {
w:window.innerWidth,
h:window.innerHeight
}
}else{ //IE8以下
if(document.compatMode=='BackCompat'){ //兼容模式
return{
w:document.body.clientWidth,
h:document.body.clientHeight
}
}else{ //标准模式
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}
}
}
console.log(getViewportOffset())
View Code

 3.2 脚本化CSS

 

12.让滚动条滚动

window.scrollTo(x,y)让滚动条滚动到指定位置（只滚一次）

window.scrollBy(x,y)让滚动条滚动指定距离（在原有位置滚动）

 

标签：

相关文章