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

函数传参，改变Div任意属性的值——涉及到获取属性的方法

2017-03-05 11:59 344 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参，改变Div任意属性的值</title>
<style>
body {
margin: 0 auto;
width: 250px;
font-size: 14px;
}
button {
width: 44px;
margin-left: 6px;

}
#a11 {
margin-left: 56px;
}
#a2 {
border:1px solid;
width:250px;
height: 250px;
padding: 9px 9px;
background: #000;
margin-left: 55px;
}

span {
color: white;
}
</style>
<script>
var changeStyle = function(elem,name,value) {
elem.style[name]=value;

};
window.onload = function() {
var aa=document.getElementsByTagName('button');
var bb=document.getElementsByTagName('input');
var cc=document.getElementById('a2');
aa[0].onclick = function() {
changeStyle(cc,bb[0].value,bb[1].value);
};
aa[1].onclick = function() {
cc.removeAttribute('style');
};
}
</script>
</head>
<body>
<div id="a1">
<p>属性名：<label><input value="background"/></label></p>
<p>属性值：<label><input value="blue"/></label></p>
<p><span id="a11"></span><button>确定</button><button >重置</button></p>
</div>
<div id="a2">
<span>在上方输入框输入“属性名”及“属性值”，点击确定按钮查看效果。</span>
</div>
</body>
</html>

效果：

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

标签： javascript HTML CSS

相关文章推荐

新的分享

章节导航