js改变样式效果
程序员文章站
2022-05-06 11:38:12
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
border: 1px solid #006633;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
var bgCol = document.getElementById('bgCol');
var bgTxt = document.getElementById('bgTxt');
var bgWi = document.getElementById('bgWi');
var bgHe = document.getElementById('bgHe');
var btnCol = document.getElementById('btnCol');
var btnTxt = document.getElementById('btnTxt');
var btnWi = document.getElementById('btnWi');
var btnHe = document.getElementById('btnHe');
// console.log(typeof bgCol); 判断类型
// 背景
btnCol.onclick = function(){
var bgColol = bgCol.value;
box.style.backgroundColor = bgColol;
// console.log(bgColol);
}
// 文字颜色
btnTxt.onclick = function(){
var btnT = bgTxt.value;
box.style.color = btnT;
// console.log(btnT);
}
// 宽度
btnWi.onclick = function(){
var btnW = bgWi.value;
box.style.width = btnW;
console.log(btnW);
}
// 高度
btnHe.onclick = function(){
var btnH = bgHe.value;
box.style.height = btnH;
console.log(btnH);
}
}
</script>
</head>
<body>
<div id="box">
*万岁！
</div>
<p><input type="text" name="" id="bgCol" value="" placeholder="请输入背景颜色"/><button type="button" id="btnCol">修改背景颜色</button></p>
<p><input type="text" name="" id="bgTxt" value="" placeholder="请输入文字颜色"/><button type="button" id="btnTxt">修改文字颜色</button></p>
<p><input type="text" name="" id="bgWi" value="" placeholder="请输入宽度"/><button type="button" id="btnWi">修改宽度</button></p>
<p><input type="text" name="" id="bgHe" value="" placeholder="请输入高度"/><button type="button" id="btnHe">修改高度</button></p>
</body>
</html>
上一篇： JavaScript正则表达式
下一篇： js实现添加删除类名active