您的位置：首页 > Web前端

web前端js基础之“json”格式的运用，及封装的简单运用

2018-10-24 17:02 92 查看 
[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>第1行</p>
<p>第2行</p>
<p>第3行</p>
</body>
</html>

<script>
// 方法1：js为标签加样式
var ps = document.getElementsByTagName("p");
for(var i = 0; i< ps.length;i++){
ps[i].style.border = "1px solid red";
ps[i].style.width = "200px";
ps[i].style.height = "60px";
ps[i].style.color = "blue";
}
</script>

<script>
// 方法2：利用函数封装较长的功能

function tag(tagname) {
return document.getElementsByTagName(tagname);
}
var ps = tag("p");//浅拷贝
function fzys(nameB,width,height,color,border){
for(var i = 0;i< ps.length;i++){
ps[i].style.width = width;
ps[i].style.height = height;
ps[i].style.color = color;
ps[i].style.border = border;
}
}
fzys("p","200px","60px","red","1px solid blue");
</script>

<script>
// 方法3：改良方法2
function tag(tagname){
return document.getElementsByTagName(tagname);
}

function addclass(add,styles) {
for(var i = 0;i< add.length; i++){
for(var k in styles){
add[i].style[k] = styles[k];
}
}
}
ps = tag("p");

addclass(ps,{border:'1px solid red',width: '100px',height: '60px'});
</script>

<script>
//方法4：改良3
var jsonnr = {
tag:function (tagname) {
return document.getElementsByTagName(tagname);
},
addcss:function (add,styles) {
for(var i = 0;i< add.length;i++){
for(var k in styles){
add[i].style[k] = styles[k];
}
}
}
}
var ps = jsonnr.tag("p");

jsonnr.addcss(ps,{width:'100px',height:'60px',border:'1px solid red',color:'blue'})
</script>

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航