Ini adalah beberapa properti css dan cara penulisan property tersebut saat digunakan pada javascripts. Mungkin saja data ini masih belum lengkap, akan tetapi semoga sedikit menolong untuk membuat beberapa penulisan script terkait dengan css properties.
Beberapa contoh penulisan secara lengkap:
- onMouseover="this.style.color='#0000ff'"
- getElementById("ID").style.backgroundColor='orange';
- function textSizer(){
oTxt.style.fontSize="150%";
}
CSS Property | JavaScript-CSS Property | Contoh Penulisan |
---|---|---|
background | background | background='#000' |
background-attachment | backgroundAttachment | backgroundAttachment='fixed' |
background-color | backgroundColor | backgroundColor='black' |
background-image | backgroundImage | backgroundImage='url()' |
background-position | backgroundPosition | backgroundPosition='left top' |
background-repeat | backgroundRepeat | backgroundRepeat='no-repeat' |
border | border | border='2px solid red' |
border-bottom | borderBottom | borderBottom='4px double #f00' |
border-bottom-color | borderBottomColor | borderBottomColor='yellow' |
border-bottom-style | borderBottomStyle | borderBottomStyle='outset' |
border-bottom-width | borderBottomWidth | borderBottomWidth='0.5em' |
border-color | borderColor | borderColor='lime' |
border-left | borderLeft | borderLeft='0.4em solid grren' |
border-left-color | borderLeftColor | borderLeftColor='magenta' |
border-left-style | borderLeftStyle | borderLeftStyle='ridge' |
border-left-width | borderLeftWidth | borderLeftWidth='1px' |
border-right | borderRight | borderRight='10px dotted #555' |
border-right-color | borderRightColor | borderRightColor='silver' |
border-right-style | borderRightStyle | borderRightStyle='solid' |
border-right-width | borderRightWidth | borderRightWidth='3px' |
border-style | borderStyle | borderStyle='dashed' |
border-top | borderTop | borderTop='5px dashed #eee' |
border-top-color | borderTopColor | borderTopColor='gold' |
border-top-style | borderTopStyle | borderTopStyle='inset' |
border-top-width | borderTopWidth | borderTopWidth='3px' |
border-width | borderWidth | borderWidth='8px' |
clear | clear | clear='both' |
clip | clip | clip='auto' |
color | color | color='lightblue' |
cursor | cursor | cursor='help' |
display | display | display='inline-block' |
font | font | font='12pt Arial bold' |
font-family | fontFamily | fontFamily='Helvetica' |
font-size | fontSize | fontSize='1em' |
font-variant | fontVariant | fontVariant='small-caps' |
font-weight | fontWeight | fontWeight='bolder' |
height | height | height='200px' |
left | left | left='10px' |
letter-spacing | letterSpacing | letterSpacing='-1px' |
line-height | lineHeight | lineHeight='2em' |
list-style | listStyle | listStyle='circle' |
list-style-image | listStyleImage | listStyleImage='none' |
list-style-position | listStylePosition | listStylePosition='0 50%' |
list-style-type | listStyleType | listStyleType='square' |
margin | margin | margin='20px 0;' |
margin-bottom | marginBottom | marginBottom='0' |
margin-left | marginLeft | marginLeft='22px' |
margin-right | marginRight | marginRight='1.4em' |
margin-top | marginTop | marginTop='22px' |
opacity | opacity | opacity='0.45' |
filter:alpha(opacity=xx) | filter.alpha.Opacity | filter.alpha.Opacity='80' |
overflow | overflow | overflow='auto' |
padding | padding | padding='20px 10px 5px 15px' |
padding-bottom | paddingBottom | paddingBottom='0.5em' |
padding-left | paddingLeft | paddingLeft='15px' |
padding-right | paddingRight | paddingRight='0.9em' |
padding-top | paddingTop | paddingTop='2%' |
pag | page | page='auto' |
page-break-after | pageBreakAfter | pageBreakAfter='avoid' |
page-break-before | pageBreakBefore | pageBreakBefore='auto' |
page-break-inside | pageBreakInside | pageBreakInside='inherit' |
position | position | position='absolute' |
float | styleFloat | styleFloat='left' |
text-align | textAlign | textAlign='justify' |
text-decoration | textDecoration | textDecoration='underline' |
text-indent | textIndent | textIndent='-999px' |
text-shadow | textShadow | textShadow='2px 2px 2px #888' |
text-transform | textTransform | textTransform='uppercase' |
top | top | top='20px' |
vertical-align | verticalAlign | verticalAlign='middle' |
visibility | visibility | visibility='hidden' |
width | width | width='400px' |
z-index | zIndex | zIndex='99' |
0 comments:
Post a Comment