get or set inline styles of an element
JavaScript Style property method ஆனது html element இல் இருக்கும் inline style களில் மாற்றங்களை செய்வதற்கு பயன்படுகிறது.
JavaScript Style
JavaScript Style property method ஆனது html element இல் இருக்கும் inline style களில் மாற்றங்களை செய்வதற்கு பயன்படுகிறது.
element.style
இங்கு javascript இல் ஒரு element ஐ select செய்து கொண்டு element.style என்ற method ஐ call செய்து html element க்கு style property ஐ apply செய்து கொள்ளலாம்.
| CSS | JavaScript |
|---|---|
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| border | border |
| border-bottom | borderBottom |
| border-bottom-color | borderBottomColor |
| border-bottom-style | borderBottomStyle |
| border-bottom-width | borderBottomWidth |
| border-color | borderColor |
| border-left | borderLeft |
| border-left-color | borderLeftColor |
| border-left-style | borderLeftStyle |
| border-left-width | borderLeftWidth |
| border-right | borderRight |
| border-right-color | borderRightColor |
| border-right-style | borderRightStyle |
| border-right-width | borderRightWidth |
| border-style | borderStyle |
| border-top | borderTop |
| border-top-color | borderTopColor |
| border-top-style | borderTopStyle |
| border-top-width | borderTopWidth |
| border-width | borderWidth |
| clear | clear |
| clip | clip |
| color | color |
| cursor | cursor |
| display | display |
| filter | filter |
| float | cssFloat |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-variant | fontVariant |
| font-weight | fontWeight |
| height | height |
| left | left |
| letter-spacing | letterSpacing |
| line-height | lineHeight |
| list-style | listStyle |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style-type | listStyleType |
| margin | margin |
| margin-bottom | marginBottom |
| margin-left | marginLeft |
| margin-right | marginRight |
| margin-top | marginTop |
| overflow | overflow |
| padding | padding |
| padding-bottom | paddingBottom |
| padding-left | paddingLeft |
| padding-right | paddingRight |
| padding-top | paddingTop |
| page-break-after | pageBreakAfter |
| page-break-before | pageBreakBefore |
| position | position |
| stroke-dasharray | strokeDasharray |
| stroke-dashoffset | strokeDashoffset |
| stroke-width | strokeWidth |
| text-align | textAlign |
| text-decoration | textDecoration |
| text-indent | textIndent |
| text-transform | textTransform |
| top | top |
| vertical-align | verticalAlign |
| visibility | visibility |
| width | width |
| z-index | zIndex |
element.style.cssText
ஒரு html element ஐ select செய்து கொண்டு cssText என்ற property ஐ பயன்படுத்துவதன் மூலமாக குறிப்பிட்ட text இன் inline style களில் மாற்றங்களை செய்யலாம்.
element.setAttribute()
setAttribute() method ஆனது style property ஐ apply செய்வதற்கு பயன்படுகிறது.
element.style.color = 'blue'
ஒரு html element ஐ select செய்து கொண்டு style மற்றும் property name ஐ பயன்படுத்துவதன் மூலமாக inline style களில் மாற்றங்களை செய்யலாம்.