Javascript 如何使用输入字段通过java脚本更改css属性的值？

我想在输入字段中输入属性值，例如颜色

新样式的另一个输入字段为蓝色

let p_change=document.getElementById（'p-change'）；
let property=document.getElementById（'property'）.value；//每种颜色、每种尺寸
让newStyle=document.getElementById（'style'）.value；//每个红色，20px
let change=document.getElementById（'change'）；
change.onclick=function（）{
p_change.style.property='newStyle'；
}

像你喜欢的那样改变我的风格
更改

所选节点具有

样式

属性，其中包含css属性

let node=document.querySelector（“#someid”）
node.style.color='red'
node.style.fontSize='40px'

单击按钮后，需要获取属性和样式

如果您之前得到了它们，则它们是空字符串

另外，使用

const

not

let

。在这种情况下，无需使用

let

还添加了一个小验证，查看输入的

属性是否存在


const p_change=document.getElementById（'p-change'）；
const change=document.getElementById（'change'）；
change.onclick=function（）{
const property=document.getElementById（'property'）。值
const newStyle=document.getElementById（'style'）.value；
//额外验证
const style=p_change.style
const findPropertyArr=Object.keys（style.filter）（key=>key==property）
如果（findPropertyArr.length>0）{
p_change.style[`${property}`]=`${newStyle}`；
document.getElementById（'error'）.remove（）；
}否则{
p_change.innerHTML+='
无效的属性名称'
}
}
像你喜欢的那样改变我的风格
更改
Ahmed，首先，所有输入都属于这些输入的一种形式或给定的属性。在本例中，我们将使用一个属性链接javascript，并将事件接口发送到函数

我们的html可以如下所示：

<form>
  <p id="p-change">Change my style like you love</p>
  <input id="property" value="" placeholder="Enter Property">
  <input id="style" value="" placeholder="Enter New Style">
  <button id="change" onclick="myFunction(event)">Change</button>
</form>

function myFunction(event) {
  //prevent the default behavior of the browser 
  event.preventDefault();

  /*
  target is a property of the event interface witch points to the DOM-element you have clicked.
  form is a property of a DOM-element pointing to the form the element belongs to.
  */

  //grabbing the values
  const prop = event.target.form.querySelector("#property").value;
  const style = event.target.form.querySelector("#style").value;
  //assign it to #p_change
  event.target.form.querySelector("#p-change").style[prop] = style; 

}

你可以在网上找到很多信息，我经常访问的网站之一是Mozilla Developer Network，为了最终确定这一点并使其更加清晰，我们在一个片段中介绍了它：


函数myFunction（事件）{
//阻止浏览器的默认行为
event.preventDefault（）；
/*
target是事件接口的一个属性，它指向您单击的DOM元素。
表单是指向元素所属表单的DOM元素的属性。
*/
//抓住价值观
const prop=event.target.form.querySelector（“#property”）.value；
const style=event.target.form.querySelector（“#style”）.value；
//将其分配给#p#change
event.target.form.querySelector（“#p-change”）.style[prop]=样式；
}

像你喜欢的那样改变我的风格
改变
这是否回答了您的问题？它与let一起工作。但我们还有其他用例。更改该变量的值时，基本上使用
let
。例如，如果（a>b）{errorMessage='differential error'}

输入的唯一目的是构建用户界面，那么就让errorMessage='Some error'在您的代码中更进一步。当您需要向API提交一些值时，如果是，则需要使用“提交”按钮（通常）将它们添加到表单中。第二个

preventDefault

不会

阻止除我们之外的任何其他操作

。它阻止事件的默认行为。例如，您单击一个锚定链接，但不想跟随该链接。@m是否在表单中输入是一个很长的讨论。第二，关于preventDefault（）你是对的。我将更改我的答案。没有长时间的讨论，因为它在文档和html中声明，只有输入值计算为有效。和@MihaiT您指的是HTML4.01。是的，在当前规范中它也是有效的。