<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>傻逼
</div>
<p>
<input type="text" placeholder=""><button>背景颜色</button><br>
<input type="text" placeholder=""><button>文字颜色</button><br>
<input type="text" placeholder=""><button>文字大小</button><br>
<input type="text" placeholder=""><button>修改宽度</button><br>
<input type="text" placeholder=""><button>修改高度</button>
</p>
<script>
var oDiv=document.getElementsByTagName("div")[0];
var oInput=document.getElementsByTagName("input");
var sendBtn=document.getElementsByTagName("button");
console.log(oDiv,oInput,sendBtn);
sendBtn[0].οnclick=function(){
oDiv.style.backgroundColor=oInput[0].value;
}
sendBtn[1].οnclick=function(){
oDiv.style.color=oInput[1].value;
}
sendBtn[2].οnclick=function(){
oDiv.style.fontSize=oInput[2].value;
}
sendBtn[3].οnclick=function(){
oDiv.style.width=oInput[3].value+"px";
}
sendBtn[4].οnclick=function(){
oDiv.style.height=oInput[4].value+"px";
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
