JavaScript and CSS

style  使用 style 物件存取 css 屬性 : document.getElementById(" id ").style. property =" value ";  所有屬性值都是字串型態。  Style object property categories:  Background Background  Border and Margin Border and Margin  Layout Layout  List List  Positioning Positioning  Table Table  Text 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); }

CSS 屬性名稱對應 CSS 屬性名稱 style. property (JavaScript ) width font-sizefontSize border-top-styleborderTopStyle padding-leftpaddingLeft floatcssFloat

Background PropertyDescription background Sets all background properties in one backgroundAttachm ent Sets whether a background-image is fixed or scrolls with the page backgroundColor Sets the background-color of an element backgroundImage Sets the background-image of an element backgroundRepeat Sets if/how a background-image will be repeated

Border and Margin borderborder borderTop borderRight borderBottom borderLeftborderTopborderRightborderBottomborderLeft borderColorborderColor borderTopColor borderRightColor borderBottomColor borderLeftColorborderTopColorborderRightColorborderBottomColorborderLeftColor borderStyleborderStyle borderTopStyle borderRightStyle borderBottomStyle borderLeftStyleborderTopStyleborderRightStyleborderBottomStyleborderLeftStyle borderWidthborderWidth borderTopWidth borderRightWidth borderBottomWidth borderLeftWidthborderTopWidthborderRightWidthborderBottomWidthborderLeftWidth marginmargin marginTop marginRight marginBottom marginLeftmarginTopmarginRightmarginBottommarginLeft paddingpadding paddingTop paddingRight paddingBottom paddingLeftpaddingToppaddingRightpaddingBottompaddingLeft

Layout PropertyDescription clear Sets on which sides of an element other floating elements are not allowed clip Sets the shape of an element cssFloat Sets where an image or a text will appear (float) in another element cursor Sets the type of cursor to be displayed direction Sets the text direction of an element display Sets how an element will be displayed height Sets the height of an element maxHeight Sets the maximum height of an element maxWidth Sets the maximum width of an element minHeight Sets the minimum height of an element minWidth Sets the minimum width of an element overflow Specifies what to do with content that does not fit in an element box verticalAlign Sets the vertical alignment of content in an element visibility Sets whether or not an element should be visible width Sets the width of an element

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"; } for (var i=0;i<5;i++) document.write(" ");

List PropertyDescription listStyleSets all the properties for a list in one listStyleImageSets an image as the list-item marker listStylePositionPositions the list-item marker listStyleTypeSets the list-item marker type

Positioning PropertyDescription bottomSets how far the bottom edge of an element is above/below the bottom edge of the parent element leftSets how far the left edge of an element is to the right/left of the left edge of the parent element positionPlaces an element in a static, relative, absolute or fixed position rightSets how far the right edge of an element is to the left/right of the right edge of the parent element topSets how far the top edge of an element is above/below the top edge of the parent element zIndexSets the stack order of an element

Table PropertyDescription borderCollapseSets whether the table border are collapsed into a single border or detached as in standard HTML borderSpacingSets the distance that separates cell borders emptyCellsSets whether or not to show empty cells in a table

Text Property Description color Sets the color of the text font Sets all font properties in one fontFamily Sets the font of an element fontSize Sets the font-size of an element fontStyle Sets the font-style of an element fontVariant Displays text in a small-caps font fontWeight Sets the boldness of the font letterSpacing Sets the space between characters lineHeight Sets the distance between lines textAlign Aligns the text textDecoration Sets the decoration of a text textIndent Indents the first line of text textTransform Sets capitalization effect on a text whiteSpace Sets how to handle line-breaks and white-space in a text wordSpacing Sets the space between words in a text