文章目录
1. 查看滚动条的滚动距离
window.pageXOffset/pageOffset
(IE9以上可以用)
得到的数值就是(横向或者竖直)滚动条滚动的距离。
那么解决IE9以下不兼容就用document.body.scrollLeft/scrollTop
或者documentElement.scrollLeft/scrollTop
(document.body.scrollLeft/scrollTop
如果有值,那么documentElement.scrollLeft/scrollTop
一定为0)
解决不兼容问题:
function getScrollOffSet () {
if(window.pageOffset) {
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + documentElement.scrollLeft,
y : document.body.scrollTop + documentElement.scrollTop
}
}
}
2. 查看视口的尺寸
浏览器的渲染模式:标准模式和怪异模式(混杂模式)
html上加上<!DOCTYPE html>
就是启动标准模式
html上不加<!DOCTYPE html>
就是启动怪异模式,比如如果IE7启动了怪异模式,那么它的渲染语法规则就是IE6的语法
查看浏览器处于什么模式document.compatMode//css1Compat(标准模式)/BackCompat(怪异模式)
解决不兼容问题:
function getViewPortOffset () {
if(window.innerWidth) {
return{
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === "BackCompat") {
return{
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return{
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
3. 查看元素的几何尺寸
1,
<div style = "width : 100px; height:100px; background-color: red; position: absolute;left: 100px; top: 100px;"></div>
-------------------------------------------------------
var div = document.getElementsByTagName('div')[0];
console.log(div.getBoundingClientRect());
2,
4. 让滚动条滚动
5. 脚本化CSS
1,dom.style.prop -->读写CSS行间样式
(它是唯一一个可读写的方式,但是它只能作用于行间样式,就是说只能读出/写入行间样式的属性值)
<style type = "text/css">
div{
width: 200px;
}
</style>
---------------------------------------------------------
<div style = " height: 100px;background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0; "></div>
---------------------------------------------------------
var div = document.getElementsByTagName('div')[0];
console.log(div.style.width)//""为空
2, window.getComputedStyle(ele,null)–>获取当前元素一切css展示的显示值
getComputedStyle()第二个参数通常情况下为null,但是也可以放上伪元素,来获取它的伪元素的尺寸
window.getComputedStyle(div,"after");//获取伪元素唯一的方法
console.log(window.getComputedStyle(div,"after").width)
因为window.getComputedStyle(ele,null)在IE8以下不兼容,所以又有一种方法是IE独有的ele.currentStyle
,如下:
解决不兼容问题:
function getStyle(elem, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
6. 一个案例让小方块运动
<div style = "width:100px; height: 100px;
background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0;
"></div>
------------------------------------------------------
function getStyle(elem, prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}
var div = document.getElementsByTagName('div')[0];
var speed = 3;//speed的作用就是加个速
var time = setInterval(function () {
speed += speed / 7;
div.style.left = parseInt(getStyle(div,'left')) + speed + 'px';
if(parseInt( div.style.left) > 500){
clearInterval(time);
}
},100)