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

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>