封装： 把相同功能的代码丢到一个函数中，重复调用。
封装css函数 ： 1,可以获取元素的样式 2，可以修改元素的样式。
封装的过程是循环渐进的，一步一步的来。
本节第一、二、三、五、六步公用CSS:
#div1 { width: 100px; height: 150px; background: red;}
本节第一、二、三、五、六步公用HTML:
<div id="div1" ></div>
封装第一步：
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:
<div id="div1" style=" width: 200px;"></div>
JS:
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
var oDiv = a('div1');
oDiv.style.width = '300px';
oDiv.onclick = function(){
//alert(css(this,'height'));
//alert(css(this,'backgroundColor'));
alert(css(this,'width'));
};
function css(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
/*
获取元素样式需要注意的三点：
1，只能获取，不能设置。
2，获取到的是计算后的样式。 计算后的样式： 最终生效的样式。
3，只能获取非复合样式。
复合样式：
background : color / image / position / repeat...
margin / padding / border / font ...
border-width: border-left-top...
非复合样式：
width / height ...
background-color;
*/
};
封装第五步：
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
var oDiv = a('div1');
//oDiv.style.width = '300px';
oDiv.onclick = function(){
//alert(css(this,'height'));
//alert(css(this,'backgroundColor'));
//alert(css(this,'width'));
css(this,'width','300px');
};
function css(obj,attr,val){
/*
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
*/
obj.style[attr] = val;
}
/*
获取元素样式需要注意的三点：
1，只能获取，不能设置。
2，获取到的是计算后的样式。 计算后的样式： 最终生效的样式。
3，只能获取非复合样式。
复合样式：
background : color / image / position / repeat...
margin / padding / border / font ...
border-width: border-left-top...
非复合样式：
width / height ...
background-color;
*/
};
封装第六步：
function a(idName){
return document.getElementById(idName);
}
window.onload = function(){
//var oDiv = document.getElementById('div1');
var oDiv=a('div1');
//oDiv.style.width = '300px';
oDiv.onclick = function(){
//alert(css(this,'height'));
//alert(css(this,'backgroundColor'));
alert(css(this,'width'));
//css(this,'width','300px');
};
function css(obj,attr,val){
//if(arguments.length == 2){
if(!val){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
//alert('abc');
obj.style[attr] = val;
}
}
/*
获取元素样式需要注意的三点：
1，只能获取，不能设置。
2，获取到的是计算后的样式。 计算后的样式： 最终生效的样式。
3，只能获取非复合样式。
复合样式：
background : color / image / position / repeat...
margin / padding / border / font ...
border-width: border-left-top...
非复合样式：
width / height ...
background-color;
*/
};
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索函数
， 浏览器
， div
， 参数
this
，以便于您获取更多的相关知识。
时间： 2024-08-03 09:45:52