设置页面中的 div
和 p
的样式
1、传统方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementsByTagName('div');
var p=document.getElementsByTagName('p');
// alert(p); // [object HTMLCollection]
// 直接选择第一个索引设置
//div[0].style.border='1px solid red';
//p[0].style.border='2px solid yellow';
// 通过for循环给所有的div与p设置
for (var i=0;i<div.length;i++) {
div[i].style.border='1px solid red';
}
for (var i=0;i<div.length;i++) {
p[i].style.border='2px solid yellow';
}
}
</script>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<p>第一个段落标签</p>
<p>第二个段落标签</p>
</body>
</html>
2、函数封装:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function(){
function huoqu(names){
return document.getElementsByTagName(names);
}
var div=huoqu('div');
var p=huoqu('p');
// alert(p);
function shezhi(names){
for(var i=0;i<names.length;i++){
names[i].style.border="solid 1px red";
}
}
shezhi(div);
shezhi(p);
/*function shezhi(names,a,b,c){
names[0].style.border='a b c';
}
shezhi(div,'1px','solid','red');
shezhi(p,'2px','solid','yellow')*/
}
</script>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<p>第一个段落标签</p>
<p>第二个段落标签</p>
</body>
</html>
3、面向对象的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var hanshu = {
//键值对的集合
// 键:值,
// 键:值,
// 封装获取元素的方法
getIt: {
ids: function(byId) {
// 通过id名称获取对象,然后返回给ids
return document.getElementById(byId);
},
tag: function(byName) {
// 通过标签名获取对象,然后返还给tag
return document.getElementsByTagName(byName);
}
},
// 封装设置样式的方法
shezhi: {
shezhi01: function(duixiang) {
// 判断对象是对象还是集合,集合的话就得加索引遍历
//E.length=undefined表示是一个标签,不是集合,id获取到的都是html标签,
// E.length!=undefined,那就是集合,如class,tagname,name获取得都是集合
if(duixiang.length == undefined) {
// alert(duixiang01.length)
duixiang.style.border = 'solid 1px red';
duixiang.style.width = 200 + 'px';
duixiang.style.height = 200 + 'px';
duixiang.style.background = 'yellow';
} else {
for(var i = 0; i < duixiang.length; i++) {
duixiang[i].style.border = 'solid 1px yellow';
duixiang[i].style.width = 150 + 'px';
duixiang[i].style.height = 150 + 'px';
duixiang[i].style.background = 'pink';
}
}
}
}
// var div_01 =hanshu.getIt.ids('div_01');
// alert(div_01);
// var p01=hanshu.getIt.tag('p');
// alert(p01)
}
var div01 = hanshu.getIt.ids('div_01');
hanshu.shezhi.shezhi01(div01); // 传递进去的是一个标签,不能加引号,加引号就成了那啥了
var p01 = hanshu.getIt.tag('p');
hanshu.shezhi.shezhi01(p01); // 传递进去的是一个标签,不能加引号
}
</script>
</head>
<body>
<div id="div_01">第一个div</div>
<p>第一个段落标签</p>
</body>
</html>