您的位置：首页 > Web前端 > JavaScript

js--27门面模式

2017-05-21 01:58 155 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
<script type=text/javascript charset=utf-8>
// 门面模式的概念:简化API接口 最经典的就是事件
// 做一件事情： 必须要调用2个函数分别是 a , b
/*
function a(x){
}
function b(y){
}
function ab(x , y){
a(x);
b(y);
}
*/

// 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置css样式
// 需求发生变化：同时设置几个元素的css样式
window.onload= function(){
// 给一个元素设置一个样式
var element = document.getElementById('div1');
element.style.color = 'red';

// 给多个元素设置同样的样式
setStyle(['div1','div2','div3'],'color' , 'blue');

// 给多个元素设置多种样式
setCss(['div1','div2','div3'],{
position:'absolute' ,
background:'green' ,
fontSize: '18px' ,
left:'100px'
});

};
//简单的门面模式
function setStyle(elementsId,prop,val){
for(var i=0;i<elementsId.length;i++){
document.getElementById(elementsId[i]).style[prop] = val ;
}
}
//门面模式的css方法
function setCss(elementsId,options){
for(var prop in options){
if(!options.hasOwnProperty(prop)) continue;
setStyle(elementsId,prop,options[prop]);
}
}

</script>
</head>
<body>
<div id="div1" >我是div1</div>
<div id="div2" >我是div2</div>
<div id="div3" >我是div3</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航