Style

Example

1

Description

Properties

Property Name Description
background The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied.background sets all background properties in one.It can be color,position etc.
backgroundAttachment Definition:The background property sets all background properties in one declaration. Syntex :Object.style.background=background-color background-image background-repeat background-attachment background-position. background-attachment--Sets if a background-image should be fixed or should scroll with the page.
backgroundColor The backgroundColor property sets the background color of an element. Syntax Object.style.backgroundColor=color-name|color-rgb |color-hex|transparent
backgroundImage Definition :The backgroundImage property sets the background image of an element. Syntex :Object.style.backgroundImage=url(URL)|none
backgroundPosition The "backgroundPosition" property sets the position of a background-image.
backgroundPositionX It is a propert of style object.Sets the x-coordinates of the backgroundPosition property.
backgroundPositionY The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. backgroundPositionY Sets the y-coordinates of the backgroundPosition property
backgroundRepeat The 'backgroundRepeat' property sets whether or not a background-image should be repeated horizontally, vertically, both or non of them.
border The border property sets all border properties in one declaration. Syntax Object.style.border=borderWidth borderStyle borderColor
borderBottom The borderBottom property sets all properties for the bottom border in one declaration. Syntax Object.style.borderBottom=borderWidth borderStyle borderColor
borderBottomColor The borderBottomColor property sets the color of the bottom border of an element. Syntax Object.style.borderBottomColor=color-name|color-rgb|color-hex
borderBottomStyle This defines the appearance of the bottom side of the border of an element. It is possible to define type, width and color of the specified element.
borderBottomWidth borderBottomWidth property sets the width of the bottom border
borderCollapse This is a style function that allows a table border to be collapsed instead of separated. When a table border is collapsed, the empty cells are ignored, and everything remains in one border.
borderColor The borderColor property sets the color of the border around an element. This property can take from one to four colors: * If you specify one color, like: table {border-color: red} - all four borders will be red * If you specify two colors, like: table {border-color: red green} - the top and bottom border will be red, left and right border will be green * If you specify three colors, like: table {border-color: red green blue}- the top border will be red, left and right border will be green, bottom border will be blue * If you specify four colors, like: table {border-color: red green blue yellow} - the top border will be red, right border will be green, bottom border will be blue, left border will be yellow Syntax Object.style.borderColor=color-name|color-rgb|color-hex|transparent
borderLeft The borderLeft property sets all properties for the left border in one declaration.
borderLeftColor The borderLeftColor property sets the color of the left border of an element. Syntax Object.style.borderLeftColor=color-name|color-rgb|color-hex|transparent
borderLeftStyle The borderLeftStyle property sets the style of the left border. Syntax Object.style.borderLeftStyle=style
borderLeftWidth The borderLeftWidth property sets the width of the left border. Syntax Object.style.borderLeftWidth=thin|medium|thick|length
borderRight The borderRight property sets all properties for the right border in one declaration. Syntax Object.style.borderRight=borderWidth borderStyle borderColor
borderRightColor The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied.borderRightColor sets the color of the right border.
borderRightStyle The borderRightStyle property sets the style of the right border. Syntax Object.style.borderRightStyle=style
borderRightWidth The borderRightWidth property sets the width of the right border of an element. Syntax Object.style.borderRightWidth=thin|medium|thick|length
borderSpacing The borderSpacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model). Syntax Object.style.borderSpacing=length,length
borderStyle The borderStyle property sets or returns the border style for all four sides in one. This property can take one to four styles. Syntax Object.style.borderStyle=style
borderTop The borderTop property sets all properties for the top border in one declaration. Syntax Object.style.borderTop=borderWidth borderStyle borderColor
borderTopColor The borderTopColor property sets the color of the top border of an element. Syntax Object.style.borderTopColor=color-name|color-RGB|color-hex
borderTopStyle Determines the style of the top border of the Style object.
borderTopWidth The borderTopWidth property sets the width of the top border of an element. Syntax Object.style.borderTopWidth=thin|medium|thick|length
borderWidth borderWidth is used to set the width of both left and right border. The possible values of this property borderWidth are thin, medium, thick, or length value.
bottom The bottom property sets how far the bottom edge of an element is above/below the bottom edge of the parent element. Syntax Object.style.bottom=auto|%|length
captionSide The captionSide property sets the position of the table caption. Syntax Object.style.captionSide=top|bottom|left|right
clear The clear property sets on which sides of an element other floating elements are not allowed. Syntax Object.style.clear=left|right|both|none
clip The clip property sets the shape of an element. What happens if an image is larger than the element it goes inside? - The "clip" property lets you specify the dimensions of an element that should be visible, and the element is clipped into this shape, and displayed. Syntax Object.style.clip=rect(top,right,bottom,left)|auto
color The color property sets the color of the text. Syntax Object.style.color=color
content Sets meta-information
counterIncrement Sets a list of counter names, followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default is 1
counterReset Sets a list of counter names, followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0
cssFloat The cssFloat property sets where an image or text will appear (float) in another element. Syntax Object.style.cssFloat=left|right|none
cssText The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied.cssText sets or retrieves the contents of a style declaration as a string.The CSSValue.cssText and rule.cssText properties are read-only, all others are read/write.
cursor The cursor property specifies the type of cursor to be displayed. Syntax Object.style.cursor=cursortype
direction Read/write property that returns the text direction of the element. Valid values are "ltr" (left to right) and "rtl" (right to left). Default is "ltr." Example(s): document.getElementById("mydiv").dir="rtl" //change text direction
display display property of style object refers to how an object is being displayed. There are various values (none, block, table, inline, etc...), however, the most common usage is to show/hide an object from the screen.
emptyCells The emptyCells property sets whether or not to show empty cells in a table. Syntax Object.style.emptyCells=hide|show
font The font property sets all font properties in one declaration. Syntax Object.style.font=value
fontFamily he fontFamily property specifies a list of font-family names and/or generic-family names for an element. The browser will use the first value it recognizes. There are two types of font-family values: * font-family: The name of a font-family, like "verdana" or "arial" * generic-family: The name of a generic font-family, like "serif" or "sans-serif" Syntax Object.style.fontFamily=font1,font2,....
fontSize The fontSize property sets the font size of an element. Syntax Object.style.fontSize=value
fontSizeAdjust The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied. The property Sets/adjusts the size of a text.
fontStretch Definition and Usage The fontStretch property is used to condense or stretch the current font. Syntax Object.style.fontStretch=value
fontStyle The "fontStyle" property sets the style of the font of an element.
fontVariant The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied.fontVariant Displays text in a small-caps font
fontWeight The fontWeight property sets the boldness of characters. Syntax Object.style.fontWeight=value
height The height property sets the height of an element. Syntax Object.style.height=auto|length|%
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element.
letterSpacing letterSpacing property of Style object refers to the horizontal spacing between letters in an element. The default value is "normal". The value can be provided in px, %, em, etc.
lineHeight The lineHeight property sets the distance between lines (sets the line-height). Syntax Object.style.lineHeight=normal|number|length|%
listStyle The listStyle property sets all list properties in one declaration. Syntax Object.style.listStyle=listStyleType listStylePosition listStyleImage
listStyleImage The listStyleImage property sets an image as the list-item marker. Syntax Object.style.listStyleImage=url|none
listStylePosition The list style position property specifies if the if the list-item markers should appear inside or outside the content flow. Outside: Coffee Tea Coca-cola Inside: Coffee Tea Coca-cola
listStyleType The Style object represents an individual style statement.The Style object can be accessed from the document or from the elements to which that style is applied.listStyleType sets the list-item marker type.
margin The margin property sets the margins of an element. This property can take from one to four values: * If you specify one value, like: div {margin: 50px} - all four margins will be 50px * If you specify two values, like: div {margin: 50px 10px} - the top and bottom margins will be 50px, left and right margins will be 10px Syntax Object.style.margin=margin
marginBottom marginBottom is used to set the bottom margin for an element.ie. the space after the element is displayed.
marginLeft The marginLeft property sets the left margin of an element. Syntax Object.style.marginLeft=auto|length|%
marginRight The marginRight property sets the right margin of an element. Syntax Object.style.marginRight=auto|length|%
marginTop The marginTop property sets the top margin of an element. Syntax Object.style.marginTop=auto|length|%
markerOffset Sets the distance between the nearest border edges of a marker box and its principal box
marks Sets whether cross marks or crop marks should be rendered just outside the page box edge
maxHeight It sets or gets the maximum height of the visible area of an element.It takes two values either length or %.% defines the maximum height. Length defined in cm,pix etc.
maxWidth The maxWidth property sets the maximum width of an element. Syntax Object.style.maxWidth=length|%
minHeight Definition :The minHeight property sets the minimum height of an element. Syntex :Object.style.minHeight=length|%
minWidth The minWidth property sets the minimum width of an element. Syntax Object.style.minWidth=length|%
orphans the minimum number of line space to be left after a paragraph is set by using oprhans property in the style tag of a paragraph.
outline The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Outline Sets all outline properties in one
outlineColor The outlineColor property sets the color of the outline around an element. Syntax Object.style.outlineColor=color-name|color-rgb|color-hex
outlineStyle The outlineStyle property sets the style of the outline around an element. Syntax Object.style.outlineStyle=style
outlineWidth The outlineWidth property sets the width of the outline around an element. Syntax Object.style.outlineWidth=thin|medium|thick|length
overflow The "overflow" property specifies what happens if content overflows an element's box.
padding It is used to set the space between the the content and the border of the field. The value can be specified in length or percentage. A single value sets the all sides, 2 value sets top/bottom & left/right, 3 vales sets top, bottom & left/right and 4 vales sets top, bottom, left & right.
paddingBottom The paddingBottom property sets the bottom padding of an element. The padding properties define the space between the element border and the element content. Syntax Object.style.paddingBottom=length|%
paddingLeft The paddingLeft property sets the left padding of an element. The padding properties define the space between the element border and the element content. Syntax Object.style.paddingLeft=length|%
paddingRight The paddingRight property sets the right padding of an element. The padding properties define the space between the element border and the element content. Syntax Object.style.paddingRight=auto|length|%
paddingTop The paddingTop property sets the top padding of an element. The padding properties define the space between the element border and the element content. Syntax Object.style.paddingTop=length|%
page It sets the page type to use when displaying an element.
pageBreakAfter The pageBreakAfter property sets the page break behavior after an element. It take any one of the value auto,always,avoid,left and right. Auto means it insets the break if necessary. always insert the break always after an element. The avoid value avoids inserting an page break after an element.
pageBreakBefore The 'pageBreakBefore' property sets the page-break behavior before an object. It can be auto, always, avoid, left, right.
pageBreakInside Sets the page-breaking behavior inside an element
position The position property places an element in a static, relative, absolute or fixed position. Syntax Object.style.position=static|relative|absolute|fixed
quotes The "quotes" property sets the type of quotation marks for embedded quotations.
right The right property sets how far the right edge of an element is to the left/right of the right edge of the parent element. Syntax Object.style.right=auto|%|length
size Sets the orientation and size of a page
tableLayout Sets the algorithm used to display the table cells, rows, and columns
textAlign The textAlign property aligns the text in an element. Syntax Object.style.textAlign=left|right|center|justify
textDecoration The 'textDecoration' property specifies the decoration added to text, for example: object.style.textDecoration="overline".
textIndent The "textIndent" property specifies the indentation of the first line in a text-block.
textShadow The Style object represents an individual style statement. The Style object can be accessed from the document or from the elements to which that style is applied. Definition :textShadow--Sets the shadow effect of a text
textTransform The textTransform property sets capitalization effect on a text. Syntax Object.style.textTransform=none|capitalize|uppercase|lowercase
top This property sets how far the top edge of an element is above/below the top edge of the parent element.
unicodeBidi Determines the way bidirectional text (left-to-right and right-to-left text in the same paragraph) is rendered.
verticalAlign Sets the vertical alignment of content in an element.
visibility The visibility property sets whether or not an element should be visible. Syntax Object.style.visibility=visible|hidden|collapse
whiteSpace Sets how to handle line-breaks and white-space in a text
widows windows property Sets the minimum number of lines for a paragraph at the top of a page.
width The width property sets the width of an element.
wordSpacing The wordSpacing property sets the space between words in a text. Syntax Object.style.wordSpacing=normal|length
zIndex The zIndex property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. Syntax Object.style.zIndex=auto|number

Methods

Method Name Description Values