How to realize dynamic style Control method by Javascript

This article mainly introduces Javascript how to achieve dynamic style control method, the article introduces in great detail, has a certain reference value, interested friends must read!

Method 1: use the style property to set the

Use the style property to set

Html Code:

Div

Javascript Code:

Var div1 = document.getElementById ("div1"); div1.onclick = function () {/ / modify the style div1.style.border = "1px solid red"; div1.style.width = "200px"; div1.style.fontSize = "200px";} method 2: define the style of the class selector

Define the style of the class selector and set its Class attribute value through the ClassName attribute of the element.

Html Code:

Div2

Css Code:

.d1 {border: 1px solid red; width: 100px; height: 100px;} .d2 {border: 1px solid blue; width: 200px; height: 200px;}

Javascript Code:

Var div2 = document.getElementById ("div2"); div2.onclick = function () {div2.className = "D1";} these are all the contents of the article "how Javascript implements dynamic style control methods". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!