js改变css的三种方式（后两种较常用）

< html >

< head >

 

< style  type="text/css">

.newDiv {

     font-weight: bold;

}

</ style >

 

< script >

function clk(event) {

     var parent = document.getElementById("parent");

     

     //改变className

     var child0 = document.createElement("div");

     child0.innerHTML = "child0";

     child0.className = "newDiv";

     parent.appendChild(child0);

     //改变cssText

     var child1 = document.createElement("div");

     child1.innerHTML = "child1";

     child1.style.cssText = "font-weight: bold";

     parent.appendChild(child1);

     //改变直接样式

     var child2 = document.createElement("div");

     child2.innerHTML = "child2";

     child2.style.fontWeight = "bold";

     parent.appendChild(child2);

}

</ script >

 

</ head >

< body >

< input  type="button" value="click" onclick="clk(event);"/>

< div  id="parent">

     < div >child</ div >

</ div >

</ body >

</ html >