Question

Which JavaScript function is used to change the style of an HTML element dynamically?

• A. document.getElementById("element").setStyle("color", "red");
• B. document.style.change()
• C. document.modifyStyle("element").color("red");
• D. document.getElementById("element").style.color = "red";

Hint:

Real style changes go through the element's style object, like node.style.color.

Answer 1

The Correct Option is D

Step 1: To change styling from JavaScript you first grab the element. document.getElementById("element") returns the DOM node whose id is "element".

Step 2: Every DOM node exposes a style object. Its properties map to inline CSS. So node.style.color sets the CSS color property directly on that element.

Step 3: Assigning node.style.color = "red" writes an inline style of color:red. This is the correct syntax.

Step 4: The other options are invented method names. There is no setStyle(), no document.style.change(), and no modifyStyle(). Only option D uses real DOM API.

So the answer is option D.