如何用javascript中input输入框输入属性改变文字和背景颜色和边距相对应的改变?
如何用JavaScript，在输入框中输入颜色，边距，背景，改变相对应文字的颜色和边距？如在文本框中输入：红色 或者“red”文字改变，”300px“边距边框加大等，背景：属性框：background ，属性值：red ，然后点击提交按钮，在网页中区域内的文字就相对应的改变颜色，边距，背景。 各位大哥大姐。谢过了！！
思路就是：获取属性和属性值，拼接字符串，然后通过innerHtml将元素渲染到页面中。具体代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.block{
display: flex;
margin-bottom: 10px;
}
.block label{
width: 60px;
text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines;
}
#attr, #value{
width: 220px;
line-height: 20px;
margin-left: 20px;
}
#content div{
width: 200px;
height: 200px;
color:#f00;
text-align: center;
line-height: 200px;
background-color:rgb(109, 203, 240);
}
</style>
</head>
<body>
<div class="block">
<label>属性</label>:
<input type="text" id="attr" />
</div>
<div class="block">
<label>属性值</label>:
<input type="text" id="value" />
</div>
<button onclick="setAttr()" style="margin-bottom: 20px;">设置属性</button>
<div id="content"></div>
</body>
<script>
window.onload = function(){
document.getElementById("content").innerHTML = `<div>Javascript有点意思</div>`;
}
var style = "";
function setAttr(){
style += `${document.getElementById("attr").value}:${document.getElementById("value").value};`;
document.getElementById("content").innerHTML = `<div style="${style}">Javascript有点意思</div>`;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.block{
display: flex;
margin-bottom: 10px;
}
.block label{
width: 60px;
text-align-last:justify;
text-align:justify;
text-justify:distribute-all-lines;
}
#attr, #value{
width: 220px;
line-height: 20px;
margin-left: 20px;
}
#content div{
width: 200px;
height: 200px;
color:#f00;
text-align: center;
line-height: 200px;
background-color:rgb(109, 203, 240);
}
</style>
</head>
<body>
<div class="block">
<label>属性</label>:
<input type="text" id="attr" />
</div>
<div class="block">
<label>属性值</label>:
<input type="text" id="value" />
</div>
<button onclick="setAttr()" style="margin-bottom: 20px;">设置属性</button>
<div id="content"></div>
</body>
<script>
window.onload = function(){
document.getElementById("content").innerHTML = `<div>Javascript有点意思</div>`;
}
var style = "";
function setAttr(){
style += `${document.getElementById("attr").value}:${document.getElementById("value").value};`;
document.getElementById("content").innerHTML = `<div style="${style}">Javascript有点意思</div>`;
}
</script>
</html>
温馨提示：答案为网友推荐，仅供参考
相似回答