目录
二、JavaScript 特效之四大家族（offset/scroll/client/event）
三大系列：offset、scroll、client 事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制） 2.1 offset 系列
一、JS获取与CSS交互
问题:
（1）CSS样式有三种类型：行内样式、内部样式和外部样式
（2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。
1.1 行内样式
通过element.style.attr（元素.style.属性）即可获取可设置
1.2 非行内样式
获取法，因浏览器的不同又分为两种，即基于IE浏览器的 和 非IE浏览器的如谷歌火狐等。
基于IE浏览器的非行内获取法：通过 element.currentStyle['attr']
基于非IE如火狐谷歌等非行内获取法：通过 getComputedStyle(element.null/伪类)[attr]
【注意事项】非行内样式获取法，只能获取不能设置。
函数封装，方便多次调用：兼容所有的浏览器，包括IE6 7
1.3 案例大全
（1）实现鼠标移入移除改变图片的边框颜色----导航效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
ul{list-style: none}
#oDiv{
margin: 0 auto;
width: 80%;
}
ul li{
float: left
}
ul li a{
display: inline-block;
width: 103px;
height: 30px;
text-decoration: none;
background-image: url('img/bg1.gif');
margin-left: 1px;
font-size: 12px;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aa = document.getElementsByTagName("a");
for(var i = 0;i<aa.length;i++){
aa[i].onmouseover = function(){
this.style.color = 'yellow';
this.style.backgroundImage = 'url(img/bg2.gif)';
};
aa[i].onmouseout = function(){
this.style.color = 'white';
this.style.backgroundImage = 'url(img/bg1.gif)';
};
}
};
</script>
</head>
<body>
<div id="oDiv">
<ul>
<li><a href ="">我的空间</a></li>
<li><a href ="">我的照片</a></li>
<li><a href ="">我的说说</a></li>
<li><a href ="">我的日志</a></li>
<li><a href ="">我的朋友</a></li>
</ul>
</div>
</body>
</html>二、JavaScript 特效之四大家族（offset/scroll/client/event）
三大系列：offset、scroll、client
事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制）
2.1 offset 系列
offset：偏移量,使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
a.获得元素距离带有定位父元素的位置
b.获得元素自身的大小（宽度高度）
（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在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）
2.2 client 系列
client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
（1）clientWidth 和 clientHeight
clientWidth：获取网页可视区域宽度（两种用法）
clientHeight：获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用，指盒子本身；body/html调用，指可视区域大小。
（2）clientX 和 clientY
| 属性 | 描述 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
客户区指的是当前窗口。语法：
event.clientX
clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
客户区指的是当前窗口。语法
event.clientY
（3） clientTop 和 clientLeft
获取盒子的 border 宽高
（4）获取屏幕的可视区
var width =
(document.documentElement.clientWidth || document.body.clientWidth
var height =
(document.documentElement.clientHeight || document.body.clientHeight)
2.3 Scroll 系列
scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
（1）ScrollWidth 和 scrollHeight（不包括border）
检测盒子的宽高。（调用者：节点元素。属性。）
盒子内容的宽高。（如果有内容超出了，显示内容的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
（2）scrollTop 和 scrollLeft
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
<script type="text/javascript">
var va;
var vb;
//得到ID的位置
function myload(){
var da=document.getElementById("id");
va=da.currentStyle.top;
vb=da.currentStyle.left;
alert(va+" "+vb);
}
//得到滚动
function mymove(){
var ga=document.documentElement.scrollTop;
var gb=document.documentElement.scrollLeft;
alert(ga+" "+gb);
}
（3）有兼容性问题
① 未声明 DTD 时（谷歌只认识他）
document.body.scrollTop
② 已经声明DTD 时（IE678只认识他）
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
window.pageYOffset
（4）
var top =
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var top =
document.documentElement.scrollTop + document.body.scrollTop; 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.event;(主要用这种)
（4） screenX、pageX 和 clientX 的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
（5） pageY 和 pageX 的兼容写法
在页面的位置 = 看得见的 + 看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
2.5 三大家族区别（总结）
（1） Width 和 height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
（2） top 和 left
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主) 作用：距离父系盒子中带有定位的距离。scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
作用：浏览器无法显示的部分（被卷去的部分）
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
作用：鼠标距离浏览器可视区域的距离（左、上）
2.6 获得屏幕宽高
window.screen.width
window.screen.height
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。
三、JavaScript 获取特定的 CSS属性值
JavaScript代码获得CSS文件声明特定样式某属性值。如：
这样情况，直接通过JS进行getElementById(’myArticle’).style.width无法获取400px值，因这数值定CSS里，所，必须其方法，写函数：
Example Source Code
<link id="system_style" type="text/css" href="global.css" rel="stylesheet"/>
global.css声明
Example Source Code
#myArticle{
width:400px;
height:300px;
}
<div id="myArticle">
...
</div>
Example Source Code
function getStyleValue(css_file_id,labname,param)
{
var tar;
var rss;
var style;
var value;
tar = document.styleSheets[css_file_id];
rss = tar.cssRules?tar.cssRules:tar.rules
for(i=0;i<rss.length;i++)
{
style = rss[i];
if(style.selectorText.toLowerCase() == labname.toLowerCase())
{
value = style.style[param];
}
}
return value;
}
现只通过：
Example Source Code
getStyleValue(0,'#myArticle','width')
获得400px
CSSStyleSheet对象
通过 document.styleSheets 访问到CSSStyleSheet的集合。其中每一个元素是一个CSSStyleSheet，就是从样式文件引入或用<style type="text/css"></style>定义的一个样式列表。
属性disabled : true or false ,该样式是否可用。
属性cssRules : 所有样式的列表，在ie中要用rules
useage : document.styleSheets[0].cssRules[0].selectorText
CSSStyleRule对象
上面的cssRules 取到的就是CSSStyleRule对象的集合，每一个CSSStyleRule对象就是一条css样式。
cssText属性：以字符串形式表示了当前状态的全部规则（ie不支持）。
useage : document.styleSheets[0].cssRules[0].cssText
selectorText 属性: 规则的选择符。（.className）
style属性 ： 与HTMLElement.style取得的对象类似，取得了一个CSSStyleDeclaration对象的引用。
CSSStyleDeclaration对象
上面style属性取到的就是一个CSSStyleDeclaration对象，包含了一条样式的所有样式属性。
cssText属性：以字符串形式表示了当前状态的全部规则（ie可以支持这个）。
useage : document.styleSheets[0].cssRules[0].style.cssText
四、兼容问题
4.1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容两个浏览器的写法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解决很多兼容性写法时,都是用if..else..
封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7)
function getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
var oDiv = document.getElementById("id")
调用：getStyle(oDiv,'width'); 4.2.关于用“索引”获取字符串每一项出现的兼容性问题:
对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值
var str="abcde";
aletr(str[1]);
但是低版本的浏览器IE6,7不兼容
兼容方法:str.charAt(i) //全部浏览器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
alert(str.charAt(i)); //放回字符串中的每一项
}
4.3.关于DOM中 childNodes 获取子节点出现的兼容性问题
childNodes:获取子节点,
--IE6-8:获取的是元素节点,正常
--高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
--nodeType=3-->文本节点
--nodeTyPE=1-->元素节点
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}注：上面childNodes为我们带来的困扰完全可以有children属性来代替。
children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，
比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
4.4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时产生的问题
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点
(高版本浏览器IE9+,FF,Chrome不兼容,其获取的空白文本节点)
--高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本浏览器IE6-8不兼容)
--兼容写法: 找到ul的第一个元素节点,并将其背景色变成红色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本浏览器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}4.5.关于使用 event对象，出现的兼容性问题
如: 获取鼠标位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY
获取event对象兼容性写法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
} 4.6.关于为一个元素绑定两个相同事件：attachEvent/attachEventLister 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件绑定封装成一个兼容函数:
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
4.7.关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
4.8.获取屏幕的可视区
var width = (document.documentElement.clientWidth || document.body.clientWidth)
var height = (document.documentElement.clientHeight || document.body.clientHeight)
4.9.获得鼠标位置（兼容多浏览器ie,firefox）
function mouseCoords(ev) {
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}4.10.获取鼠标触碰页面的位置
ev = ev || window.event;
var mousePos = mouseCoords(ev);
// alert(ev.pageX);
// alert(mousePos.x);
da.style.left = mousePos.x+"px";
// alert(getStyle(da,"left"));
da.style.top = mousePos.y+"px";
五、案例
1.获取鼠标指针的坐标：
//下面的例子可显示出事件发生时鼠标指针的坐标：
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.</p>
</body>
</html>2.球窗口滚动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#oDiv{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left:0px;
/*盒子的圆弧度*/
border-radius: 100%;
}
</style>
<script type="text/javascript">
//方法：获取非行内式样式
function getStyle(obj,name){//obj:操作哪一个标签 name:该标签的属性
if(obj.currentStyle){//兼容IE
return obj.currentStyle[name];
}else{//兼容非IE浏览器---谷歌 火狐等等
return getComputedStyle(obj,false)[name];
}
}
/**
* client浏览器窗口可视区域兼容性
*/
function client() {
if (window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
window.onload = function(){
var oDiv = document.getElementById("oDiv");
var flag = true;
var flag2 = true;
window.setInterval(function(){
var left = parseInt(getStyle(oDiv,"left"));
var top = parseInt(getStyle(oDiv,"top"));
var width = (document.documentElement.clientWidth || document.body.clientWidth)-oDiv.offsetWidth;
var height = (document.documentElement.clientHeight || document.body.clientHeight)-oDiv.offsetHeight;
if(flag == true){
left+=5;
}
if(left >= width){
flag = false;
}
if(flag == false){
left-=5;
}
if(left<=0){
flag=true;
}
if(flag2 == true){
top+=5
}
if(top >= height){
flag2 = false;
}
if(flag2 == false){
top-=5;
}
if(top<=0){
flag2=true;
}
oDiv.style.left = left+'px';
oDiv.style.top = top+'px';
},50);
};
</script>
</head>
<body>
<div id="oDiv">
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
