一,JS与css交互基本概述
css有三种设置样式:行内样式,内部样式及外部样式
JavaScript获取css样式分两种情况:行内样式获取法和非行内样式获取法。
行内样式
通过element.style.attr(元素.style.属性) 即可获取设置
非行内样式
因浏览器的不同又分为两种,即基于IE浏览器的
和 非IE浏览器的如谷歌火狐等。
基于IE浏览器的非行内获取法:通过 element.currentStyle['attr']
基于非IE如火狐谷歌等非行内获取法:通过 getComputedStyle(element.null/伪类)[attr]
【注意事项】非行内样式获取法,只能获取不能设置。
二,javaScript四大特性家族(offset/scroll/client/event )
三大系类:offset,scroll,client
事件对象:event系类(事件被触发时,鼠标和键盘的状态) (通过属性控制)
2.1 offset系类
offset:偏移量使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
.获得元素距离带有定位父元素的位置
.获得元素自身的大小(宽度高度)
(1) offsetWidth 和 offsetHeight (检测盒子自身宽高+padding+border)
** offsetWidth = width + padding + border;
** offsetHeight = Height + padding + border;
(2) offsetLeft 和 offsetTop (检测距离父盒子有定位的左/上面的距离)
返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。
如果父级都没有定位则以 body 为准。
offsetLeft 从父级的 padding 开始算,父级的 border 不算。
在父盒子有定位的情况下,offsetLeft == style.left (去掉px)
(3) offsetLeft 和 style.left 区别
① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
② offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px。
③ offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
④ 如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
(style.left在等号的左边和右边还不一样。左边的时候是属性,右边的时候是值。)
//获取div标签距离父标签的距离。
console.log(oDiv.offsetLeft);
console.log(oDiv.offsetTop);
// offsetWidth|offsetHeight 宽度:width+边框+内填充
console.log(oDiv.offsetWidth);
console.log(oDiv.offsetHeight);
// style属性:只能调用行内样式
console.log(oDiv.style.width);
//通过currentStyle或者getComputedStyle解决非行内式样式的获取
var width = getStyle(oDiv,"width");
console.log(width);
2.2 client系类
client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
(1)clientWidth 和 clientHeight
clientWidth:获取网页可视区域宽度(两种用法)
clientHeight:获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用,指盒子本身;body/html调用,指可视区域大小。
(2)clientX 和 clientY
clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
(3) clientTop 和 clientLeft
获取盒子的 border 宽高
(4)获取屏幕的可视区
var width = (document.documentElement.clientWidth || document.body.clientWidth)
var height = (document.documentElement.clientHeight || document.body.clientHeight)
//获取指定元素的父级元素对象,如果父级对象没有定位直接指向body
console.log(oDiv.offsetParent);
console.log("-------------------------------------------------");
//clientTop获取上边框的大小
console.log(oDiv.clientTop);
//clientLeft获取左边框的大小
console.log(oDiv.clientLeft);
//获取指定元素的宽度(width+内填充)
console.log(oDiv.clientWidth);
//获取指定元素的宽度(width+内填充)
console.log(oDiv.clientHeight);//200
2.3 Scroll系类
scroll翻译过来就是滚动的,我们使用scroll系类的相关属性可以
动态得到该元素的大小滚动距离等
(1) scroll Width和scroll Height(不包括border)
检测盒子的宽度。(调用者:节点元素。属性)
盒子内容的宽度。(如果有内容超出了,显示内容的高度)
IE567可以比盒子小。IE8+火狐谷歌不能比盒子小
2)scrollTop 和 scrollLeft
网页,被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
(3)有兼容性问题
① 未声明 DTD 时(谷歌只认识他)
document.body.scrollTop
② 已经声明DTD 时(IE678只认识他)
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
//获取被滚动条滚去的距离
window.onscroll = function(){
var scrollDemo = scroll();
console.log(scrollDemo.left)
console.log(scrollDemo.top)
};
//div的实际高度
console.log("width: "+oDiv.scrollHeight);
console.log("width: "+oDiv.scrollWidth);
2.4 event 事件对象
(1)概述
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的 信息。
所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
普通浏览器支持 event(带参,任意参数)
ie 678 支持 window.event(无参,内置)
(2) 事件对象 event 的获取
IE678中,window.event
在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
(3) 兼容获取方式有两种:
不写参数直接使用event;
写参数,但是参数为event
var event = event || window.even