JavaScript dan CSS by ygq15756

VIEWS: 49 PAGES: 11

									JavaScript dan CSS
                            style
   Cara mengubah style dengan javascript:
     document.getElementById("id").style.property="value";
   Kategori Style:
       Background
       Border and Margin
       Layout
       List
       Positioning
       Table
       Text
                      Examples
div1= document.getElementById("content").style;
div1.width = "800px";
div1.padding = "10px 20px 0px";
div.backgroundColor="#ccf";

div1.width = (parseInt(div1.width+50)+"px";
Properti CSS dalam javascript
 CSS property       Style.property (JavaScript )
 width              width
 font-size          fontSize
 border-top-style   borderTopStyle
 float              cssFloat
                      Background

Property           Description
background         Sets all background properties in one
backgroundAttachment 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
border borderTop borderRight borderBottom borderLeft
borderColor borderTopColor borderRightColor borderBottomColor borderLeftColor
borderStyle borderTopStyle borderRightStyle borderBottomStyle borderLeftStyle
borderWidth borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth


margin marginTop marginRight marginBottom marginLeft


padding paddingTop paddingRight paddingBottom paddingLeft
                                    Layout
Property        Description
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
                                   List
Property            Description
listStyle           Sets all the properties for a list in one
listStyleImage      Sets an image as the list-item marker
listStylePosition   Positions the list-item marker
listStyleType       Sets the list-item marker type
                          Positioning
Property   Description
bottom     Sets how far the bottom edge of an element is above/below the
           bottom edge of the parent element
left       Sets how far the left edge of an element is to the right/left of the left
           edge of the parent element
position   Places an element in a static, relative, absolute or fixed position
right      Sets how far the right edge of an element is to the left/right of the
           right edge of the parent element
top        Sets how far the top edge of an element is above/below the top edge
           of the parent element
zIndex     Sets the stack order of an element
                               Table
Property         Description
borderCollapse   Sets whether the table border are collapsed into a single
                 border or detached as in standard HTML
borderSpacing    Sets the distance that separates cell borders
emptyCells       Sets 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

								
To top