How to change style in javascript using a variable?

Question

I want to prompt the user for a CSS property and a value and change the style of the paragraphs but I can't get the property working

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;
  }
}

Blue · Accepted Answer · 2019-02-03 02:29:13Z

2

You're trying to set the style prop, not the variable that's inside prop. Use brackets to signify prop is a variable, and to use the value contained inside of it:

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

Here is a working demo:

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>

answered Feb 3, 2019 at 2:29

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sarbudeen · Accepted Answer · 2019-02-03 09:04:57Z

0

Try This Code

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>

answered Feb 3, 2019 at 9:04

sarbudeen

1702 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to change style in javascript using a variable?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related