JavaScript Style

JavaScript Style property method ஆனது html element இல் இருக்கும் inline style களில் மாற்றங்களை செய்வதற்கு பயன்படுகிறது.

element.style

இங்கு javascript இல் ஒரு element ஐ select செய்து கொண்டு element.style என்ற method ஐ call செய்து html element க்கு style property ஐ apply செய்து கொள்ளலாம்.

CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

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 களில் மாற்றங்களை செய்யலாம்.

Comments