==> 学习汇总(持续更新)
==> 从零搭建后端基础设施系列(一)-- 背景介绍
效果如图:
HTML代码:
<div id = "div">
<form action="">
<div id="text">
<label>属性名:<input type="text" name="name" id="name" /></label>
<label>属性值:<input type="text" name="value" id="value" /></label>
</div>
<div id="btn">
<input type="button" name="ok" id="ok" value="确定"/>
<input type="button" name="reset" id="reset" value="重置" />
</div>
<div id="test-area">
在上方输入框输入"属性名"及"属性值",点击确定按钮查看效果
</div>
</form>
</div>
CSS代码:
*{margin:0;padding:0;}
#div{width: 400px; margin: 0 auto;}/*居中*/
#div #text{width: 350px;height: 100px;}
#div #text input{width: 250px;height:30px;margin:10px;}
#div #btn{width: 300px; height: 40px; }
#div #btn #ok{width:70px;height:30px; margin-left:73px; }
#div #btn #reset{width:70px;height:30px;}
#div #test-area{width: 300px;height: 300px;margin-left: 60px;background: #000000;color: #fff; }
JS代码:
window.onload = function ()
{
function $(id){return document.getElementById(id);}; //通过id获取元素对象
function changeValue(name,value) {$("test-area").style[name] = value;};//改变样式
$('ok').onclick = function ()
{
changeValue($('name').value,$('value').value);//把编辑框中的值传进去
}
$('reset').onclick = function ()
{
$('test-area').removeAttribute('style'); //去掉style属性即可重置
$('name').value = '';
$('value').value = '';
}
}