最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript中封装class函数学习笔记
时间：2015-08-23 编辑：简简单单 来源：一聚教程网
封装： 把相同功能的代码丢到一个函数中，重复调用。
封装css函数 ： 1,可以获取元素的样式 2，可以修改元素的样式。
封装的过程是循环渐进的，一步一步的来。
本节第一、二、三、五、六步公用CSS:
#div1 { width: 100px; height: 150px; background: red;}
本节第一、二、三、五、六步公用HTML:
封装第一步：
JS:
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
var oDiv = a('div1');
oDiv.onclick = function(){
//alert(oDiv.style.width); //style 只能获取到写在行间的样式。
alert(oDiv.currentStyle.width); //ie浏览器独有的属性，标准浏览器不支持。currentStyle：对象；
alert(getComputedStyle(oDiv,false).height);
//标准浏览器的方法，ie6/7/8
};
/*
getComputedStyle：
第一个参数： 指定是获取哪个元素的样式。
第二个参数： 没有实际意义，完全是为了向下兼容，可以是任何一个合法的变量值。
*/
};
封装第二步：
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
var oDiv = a('div1');
oDiv.onclick = function(){
//alert(oDiv.style.width); //style 只能获取到写在行间的样式。
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width); //ie浏览器独有的属性，标准浏览器不支持。
}else{
alert(getComputedStyle(oDiv,false).width);
//标准浏览器的方法，ie6/7/8
}
};
/*
getComputedStyle：
第一个参数： 指定是获取哪个元素的样式。
第二个参数： 没有实际意义，完全是为了向下兼容，可以是任何一个合法的变量值。
*/
};
封装第三步：
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
var oDiv = a('div1');
oDiv.onclick = function(){
alert(css(this,'height')); //传递参数
};
function css(obj,attr){ //接受参数
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
/*
obj.style.width / obj['style']['width']
*/
/*
getComputedStyle：
第一个参数： 指定是获取哪个元素的样式。
第二个参数： 没有实际意义，完全是为了向下兼容，可以是任何一个合法的变量值。
*/
};
封装第四步：
HTML:
相关文章
- JavaScript 函数柯里化的学习笔记 11-01
- JavaScript高阶函数的学习笔记 10-04
- Javascript中回调函数的学习笔记 07-30
- JavaScript递归函数学习笔记 11-19
- JavaScript函数的定义和调用学习笔记 11-19
- HTML简单购物数量小程序代码展示 10-31