获取样式值(行内和非行内)
// w3c getComputedStyle(元素对象,null).属性名
// ie8及以下版本 元素对象.currentStyle.属性名
var oD = document.getElementById("box");
if(oD.currentStyle){ //ie低版本
alert(oD.currentStyle.left);
}else if(getComputedStyle){ //w3c
alert(getComputedStyle(oD,null).left);
}
点击下方小盒子运动
var btn = document.getElementsByTagName("button")[0];
var oD = document.getElementById("box");
btn.onclick = function(){
// if(oD.currentStyle){ //ie8
// oD.style.left = parseInt(oD.currentStyle.left) + 50 +"px";
// }else if(getComputedStyle){ //w3c
// oD.style.left = parseInt(getComputedStyle(oD,null).left) + 50 + "px";
// }
//
// var lf;
// if(oD.currentStyle){
// lf = oD.currentStyle.left;
// }else if(document.defaultView && document.defaultView.getComputedStyle){
// lf = document.defaultView.getComputedStyle(oD,null).left;
// }
// oD.style.left = parseInt(lf) + 50 + "px";
//
function getStyle(elem,name){
if(elem.currentStyle){ //ie8
return elem.currentStyle[name];
}else if(document.defaultView && document.defaultView.getComputedStyle){ //w3c
return document.defaultView.getComputedStyle(elem,null)[name];
}
}
alert(getStyle(oD,"left"));
}
点击下方小盒子运动点击下方小盒子运动
点击下方小盒子运动
点击下方小盒子运动
//scroll系列
// alert(oD.scrollTop);//滚动条向上卷去的距离
// alert(oD.scrollLeft);//滚动条向左卷去的距离
alert(oD.scrollWidth);//内容的实际宽度
alert(oD.scrollHeight);//内容的实际高度
window.onscroll = function(){ //window对象的事件 onscroll 滚动条滚动事件 当滚动条滚动的时候，就会触发滚动条滚动事件
// alert(document.body.scrollTop);
// alert(document.body.scrollLeft);
// alert("您的滚动条发生了滚动");
// alert(document.documentElement.scrollTop);
alert(document.documentElement.scrollTop || document.body.scrollTop);//兼容写法
}
//广告层
var oD = document.getElementById("adv");
//获取广告层初始的left值和top值
function getStyle(elem,name){
if(elem.currentStyle){ //ie8
return elem.currentStyle[name];
}else if(getComputedStyle){ //w3c
return getComputedStyle(elem,null)[name];
}
}
var l = getStyle(oD,"left");//获取广告层left的初始值 都有单位
var t = getStyle(oD,"top");//获取广告层top的初始值
function sc(){
var st = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动条往上卷去的距离
var sl = document.documentElement.scrollLeft || document.body.scrollLeft;//获取滚动条往左卷去的距离
oD.style.left = parseInt(l) + sl + "px";
oD.style.top = parseInt(t) + st + "px";
}
window.onscroll = sc;
获取样式；
获取行内样式：元素对象.style.属性名
获取非行内样式：
w3c getComputedStyle(元素对象，null).属性名 document.defaultView.getComputedStyle(元素对象，null).属性名
IE8 元素对象.currentStyle.属性名
scroll系列
scrollTop 滚动条往上卷去的距离
scrollLeft 滚动条往左卷去的距离
scrollHeight 获取实际内容高度
scrollWidth 获取实际内容高度
浏览器窗口滚动
document.documentElement.scrollTop || document.body.scrollTop
// offset系列
// offsetTop 距离浏览器可视窗口上部的偏移量
// offsetLeft 距离浏览器可视窗口左侧的偏移量
// offsetWidth width+border+padding 不含margin
// offsetHeight
alert(window.innerWidth);//在w3c的浏览器
// alert(document.documentElement.clientWidth);//IE8
alert(document.documentElement.clientWidth || document.body.clientWidth);
// 获取浏览器可视区域的宽度和高度 兼容ie及w3c
// document.documentElement.clientWidth || document.body.clientWidth
// document.documentElement.clientHeight || document.body.clientHeight
alert(e.target); //[object MouseEvent] e.target =====> document.getElementById("box")
// alert(e.clientX);//浏览器可视区域内的坐标
// alert(e.clientY);
alert(e.pageX);
// pageX = clientX + scrollLeft
// pageY = clientY + scrollTop