新手入坑，俗话说得好一如前端深似海，今天我来简单介绍一下如何通过js动态修改属性
HTML：
<body>
<span>高度:</span>
<input type='text' id='tall'/>
<span>宽度:</span>
<input type='text id='long'/>
<span>颜色:</span>
<input type='text id='bgcolor'/>
<div id='div1></div>、
CSS:
#div1{
width: 100px;
height: 100px;
background: black;
}
JS:
/* 重点事件：oninput 事件oninput 事件在用户输入时触发。动态改变数值该事件在或元素的值发生改变时触发。
*/
//获取ID名字为tall的标签
var tall = document.getElementById('tall');
//获取ID名字为long的标签
var long = document.getElementById('long');
//获取ID名字为bgcolor的标签
var bgcolor = document.getElementById('bgcolor');
//获取ID名字为div1的标签
var div1 = document.getElementById('div1');
//给tall标签oninput 事件，动态改变div1标签的高度
tall.oninput = function(){
div1.style.height = tall.value + 'px';
}
//给long标签oninput 事件，动态改变div1标签的宽度
long.oninput = function(){
div1.style.width = long.value + 'px';
}
//给bgcolor标签oninput 事件，动态改变div1标签的颜色
bgcolor.oninput = function(){
div1.style.backgroundColor = bgcolor.value;
}
好了，JS注释已经打上，有需求的朋友直接拿就OK了
网友评论