Question

我想提示用户输入CSS属性和值并更改段落的样式，但我无法使该属性正常工作

function change()
  var prop = prompt("Enter a css property");
  var val = prompt("Enter a value for the property");
  var x = document.querySelectorAll("p");
  for (i = 0; i < x.length; i++) {
    x[i].style.prop = val;
  }
}

Answer 1

您正在尝试设置样式prop，而不是prop内部的变量。使用方括号表示prop是变量，并使用其中包含的值：

x[i].style[prop] = val;

这是一个工作示例：

function change() {
  var prop = 'color';
  var val = 'blue';
  var x = document.querySelectorAll("p");
  for (i = 0; i < x.length; i++) {
    x[i].style[prop] = val;
  }
}

<p>Will turn blue</p>

<button onclick="change()">Turn paragraphs blue</button>

Answer 2

尝试此代码

function change(){
  var prop = prompt("Enter a css property");
  var val = prompt("Enter a value for the property");
 var x = document.querySelectorAll("p");
  for (var i = 0; i < x.length; i++) {
    x[i].style[prop] = val;
  }
}

<html>
  <head>
  </head>
  <body>
  <button onclick="change()">Change Style</button>
  <p>Hello World</p>
  <p>Hello World</p>
  <p>Hello World</p>
  </body>
</html>

如何使用变量更改javascript中的样式？

2 个答案: