JavaScript and CSS

JavaScript and CSS http://www.w3schools.com/jsref/dom_obj_style.asp

style • 使用style物件存取css屬性: document.getElementById("id").style.property="value"; • 所有屬性值都是字串型態。 • Style object property categories: • Background • Border and Margin • Layout • List • Positioning • Table • Text

Examples div1= document.getElementById("content"); div1.style.width = "800px"; div1.style.padding = "10px 20px 0px"; div.style.backgroundColor="#ccf"; div.style.fontSize=“2.5em”; div1.style.fontSize=(parseFloat(div.style.fontSize)*1.2)+"em"; div1.style.width = (parseInt(div1.style.width)+50)+"px"; div1.style.width +=50; // 錯誤!

Examples • img1.style.opacity=1.0; • img2.style.opacity=0.0; • … • function imgShow() { • o1 = parseFloat(img1.style.opacity); • o2 = parseFloat(img2.style.opacity); • o1 -= 0.02; • o2 += 0.02; • img1.style.opacity=o1; • img2.style.opacity = o2; • if (o1>0) • window.setTimeout("imgShow()", 200); • } http://ycchen.im.ncnu.edu.tw/www2011/lab/opacityJS.html

CSS屬性名稱對應

Background

Border and Margin borderborderTopborderRightborderBottomborderLeft borderColorborderTopColorborderRightColorborderBottomColorborderLeftColor borderStyleborderTopStyleborderRightStyleborderBottomStyleborderLeftStyle borderWidthborderTopWidthborderRightWidthborderBottomWidthborderLeftWidth marginmarginTopmarginRightmarginBottommarginLeft paddingpaddingToppaddingRightpaddingBottompaddingLeft

Layout

var cardPool=document.getElementById(“cardPool”); document.getElementById("btnStart").onclick=start; document.getElementById("btnStop").onclick=stop; cardPool.style.display="none"; … function start() { cardPool.style.display=“block"; … } function stop() { cardPool.style.display="none"; } <div id="cardPool"> <script type="text/javascript"> for (var i=0;i<5;i++) document.write("<img id=\""+i+"\" src=\"pcards/b1fv.png\" />"); </script> </div> http://ycchen.im.ncnu.edu.tw/www2011/lab/pcard.html

List

Positioning

Table

Text

JavaScript and CSS