如何用javascript中input输入框输入属性改变文字和背景颜色和边距相对应的改变?

JavaScript020

如何用javascript中input输入框输入属性改变文字和背景颜色和边距相对应的改变?,第1张

思路就是：获取属性和属性值，拼接字符串，然后通过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>

input text 有两个事件。一个是获取焦点，一个是离开焦点。

当光标在文本框内触发获取焦点事件，你可以写个css把文本框颜色变了

离开焦点把文本框的颜色再变回去。