Ѕиблиотека JAVASCRIPT SE@RCHER
Ѕиблиотека JAVASCRIPT SE@RCHER
Ѕиблиотека JAVASCRIPT SE@RCHER




ј–’»¬ JAVASCRIPT + CSS ј–’»¬ JAVASCRIPT + CSS ј–’»¬ JAVASCRIPT + CSS
:: Х блок Х линк Х меню Х окно Х текст Х фото ::

ѕримеры поддержки динамических свойств CSS
 ак обратитьс€ к свойствам CSS-стилей из JavaScript

Style objectStyle object

 

| Background properties | Border/Outline properties | List properties | Margin/Padding properties | Misc properties | Positioning/Layout properties | Printing properties | Table properties | Text properties | Table Object Collections | Table Object Properties | td/th Object Properties | tr Object Properties | tr Object Methods | Textarea Object Properties | Textarea Object Methods |

Background properties
background

.style.background="color image repeat attachment position"

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

backgroundAttachment.style.backgroundAttachment="scroll|fixed|inherit"
backgroundColor.style.backgroundColor="color|inherit|transparent"
backgroundImage.style.backgroundImage="url('URL')|none|inherit"
backgroundPosition.style.backgroundPosition="center top left right bottom";
backgroundRepeat.style.backgroundRepeat="repeat|repeat-x|repeat-y|no-repeat|inherit"
Border/Outline properties
border.style.border="width style color"
borderBottom.style.borderBottom="width style color"
borderBottomColor.style.borderBottomColor="color|transparent|inherit"
borderBottomStyle

.style.borderBottomStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

borderBottomWidth.style.borderBottomWidth="thin|medium|thick|length|inherit"
borderColor.style.borderColor="color|transparent|inherit"
borderLeft.style.borderLeft="width style color"
borderLeftColor.style.borderLeftColor="color|transparent|inherit"
borderLeftStyle

.style.borderLeftStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

borderLeftWidth.style.borderLeftWidth="thin|medium|thick|length|inherit"
borderRight.style.borderRight="width style color"
borderRightColor.style.borderRightColor="color|transparent|inherit"
borderRightStyle

.style.borderRightStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

borderRightWidth.style.borderRightWidth="thin|medium|thick|length|inherit"
borderStyle

.style.borderStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

borderTop.style.borderTop="width style color"
borderTopColor.style.borderTopColor="color|transparent|inherit"
borderTopStyle

.style.borderTopStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

borderTopWidth.style.borderTopWidth="thin|medium|thick|length|inherit"
borderWidth.style.borderTopWidth="thin|medium|thick|length|inherit"
outline.style.outline="width style color|inherit"
outlineColor.style.outlineColor="color|invert|inherit"
outlineStyle

.style.outlineStyle="value"

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit

outlineWidth.style.outlineWidth="thin|medium|thick|length|inherit"
List properties
listStyle.style.listStyle="type position image"
listStyleImage.style.listStyleImage="none|url|inherit"
listStylePosition.style.listStylePosition="outside|inside|inherit"
listStyleType

.style.listStyleType="value"

armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number. This is default for <ol>
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
disc The marker is a filled circle. This is default for <ul>
georgian The marker is traditional Georgian numbering
hebrew The marker is traditional Hebrew numbering
hiragana The marker is traditional Hiragana numbering
hiragana-iroha The marker is traditional Hiragana iroha numbering
inherit The value of the listStyleType property is inherited from parent element
katakana The marker is traditional Katakana numbering
katakana-iroha The marker is traditional Katakana iroha numbering
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)

Margin/Padding properties
margin.style.margin="%|length|auto|inherit"
marginBottom.style.marginBottom="%|length|auto|inherit"
marginLeft.style.marginLeft="%|length|auto|inherit"
marginRight.style.marginRight="%|length|auto|inherit"
marginTop.style.marginTop="%|length|auto|inherit"
padding.style.padding="%|length|inherit"
paddingBottom.style.paddingBottom="%|length|inherit"
paddingLeft.style.paddingLeft="%|length|inherit"
paddingRight.style.paddingRight="%|length|inherit"
paddingTop.style.paddingTop="%|length|inherit"
Misc properties
cssText.style.cssText="string"
Positioning/Layout properties
bottom.style.bottom="auto|length|%|inherit"
clear.style.clear="none|left|right|both"
clip.style.clip="auto|rect(top right bottom left)|inherit"
cssFloat.style.cssFloat="left|right|none|inherit"
cursor

.style.cursor="value"

auto Browser default cursor (often an arrow). This is default
crosshair Crosshair cursor
default Platform-depended default cursor (often an arrow)
e-resize East arrows. Indicates that an element is resizable
help Arrow with question mark, indicating that help is available
move Crossed arrows, indicating that something can be moved
n-resize North arrows. Indicates that an element is resizable
ne-resize North-east arrows. Indicates that an element is resizable
nw-resize North-west. Indicates that an element is resizable
pointer Normal hand
s-resize South arrows. Indicates that an element is resizable
se-resize South-east arrows. Indicates that an element is resizable
sw-resize South-west arrows. Indicates that an element is resizable
text The cursor indicates text
url The URL of a cursor file to be used. Tip: Always define a generic cursor at the end of the list in case none of the url-defined cursors work
w-resize West arrows. Indicates that an element is resizable
wait Hourglass or watch, indicating that the program is busy

display

.style.display="value"

block Element is rendered as a block-level element
compact Element is rendered as a block-level or inline element. Depends on context
inherit The value of the display property is inherited from parent element
inline Element is rendered as an inline element. This is default
inline-block Element is rendered as a block box inside an inline box
inline-table Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item Element is rendered as a list
marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
none Element will not be displayed
run-in Element is rendered as block-level or inline element. Depends on context
table Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption Element is rendered as a table caption (like <caption>)
table-cell Element is rendered as a table cell (like <td> and <th>)
table-column Element is rendered as a column of cells (like <col>)
table-column-group Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group Element is rendered as a table footer row (like <tfoot>)
table-header-group Element is rendered as a table header row (like <thead>)
table-row Element is rendered as a table row (like <tr>)
table-row-group Element is rendered as a group of one or more rows (like <tbody>)

height.style.height="auto|length|%|inherit"
left.style.left="auto|length|%|inherit"
maxHeight.style.maxHeight="none|length|%|inherit"
maxWidth.style.maxWidth="none|length|%|inherit"
minHeight.style.minHeight="none|length|%|inherit"
minWidth.style.minWidth="none|length|%|inherit"
overflow.style.overflow="visible|hidden|scroll|auto|inherit"
position.style.position="static|absolute|fixed|relative|inherit"
right.style.right="auto|length|%|inherit"
top.style.top="auto|length|%|inherit"
verticalAlign

.style.verticalAlign="value"

length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
baseline Align the baseline of the element with the baseline of the parent element. This is default
sub Aligns the element as it was subscript
super Aligns the element as it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
inherit Specifies that the value of the verticalAlign property should be inherited from the parent element

visibility.style.visibility="visible|hidden|collapse|inherit"
zIndex.style.zIndex="auto|number|inherit"
Printing properties
orphans.style.orphans="number|inherit"
pageBreakAfter.style.pageBreakAfter="auto|always|avoid|emptystring|left|right|inherit"
pageBreakBefore.style.pageBreakBefore="auto|always|avoid|emptystring|left|right|inherit"
pageBreakInside.style.pageBreakInside="auto|avoid|inherit"
widows.style.widows="number|inherit"
Table properties
borderCollapse.style.borderCollapse="separate|collapse|inherit"
borderSpacing.style.borderSpacing="length length|inherit"
captionSide.style.captionSide="top|bottom|left|right|inherit"
emptyCells.style.emptyCells="show|hide|inherit"
tableLayout.style.tableLayout="automatic|fixed|inherit"
Text properties
color.style.color="color|inherit"
direction.style.direction="ltr|rtl|inherit"
font

.style.font="[style variant weight size/lineHeight family] or [reserved word]"

.style.font="italic bold 20px arial,serif";

fontFamily.style.fontFamily="font1, font2, etc.|inherit" .style.fontFamily="Impact,Charcoal,sans-serif";
fontSize.style.fontSize="value|inherit"
fontSizeAdjust

.style.fontSizeAdjust="none|value|inherit"

.style.fontSizeAdjust="0.58";

fontStyle.style.fontStyle="normal|italic|oblique|inherit"
fontVariant.style.fontVariant="normal|small-caps|inherit"
fontWeight

.style.fontWeight="value"

normal Font is normal. This is default
lighter Font is lighter
bold Font is bold
bolder Font is bolder
100
200
300
400
500
600
700
800
900 Defines from light to bold characters. 400 is the same as normal, and 700 is the same as bold
inherit The value of the fontWeight property is inherited from parent element

letterSpacing.style.letterSpacing="normal|length|inherit"
lineHeight.style.lineHeight="normal|number|length|%|inherit"
quotes.style.quotes="none|string string string string|inherit"
textAlign.style.textAlign="left|right|center|justify|inherit"
textDecoration.style.textDecoration="none|underline|overline|line-through|blink|inherit"
textIndent.style.textIndent="length|%|inherit"
textShadow.style.textShadow="none|h-shadow v-shadow blur color|inherit"
textTransform.style.textTransform="none|capitalize|uppercase|lowercase|inherit"
unicodeBidi.style.unicodeBidi="normal|embed|bidi-override|inherit"
whiteSpace.style.whiteSpace="normal|nowrap|pre|inherit"
wordSpacing.style.wordSpacing="normal|length|inherit"
Table Object Collections
cells 
rows 
tBodies 
caption 
cellPadding 
cellSpacing 
frame 
rules 
summary 
tFoot 
tHead 
Table Object Properties
createCaption() 
createTFoot() 
createTHead() 
deleteCaption() 
deleteRow() 
deleteTFoot() 
deleteTHead() 
insertRow() 
td/th Object Properties
abbr 
axis 
cellIndex 
ch 
chOff 
colSpan 
headers 
rowSpan 
vAlign 
tr Object Properties
ch 
chOff 
rowIndex 
sectionRowIndex 
vAlign 
tr Object Methods
deleteCell() 
insertCell() 
Textarea Object Properties
cols 
defaultValue 
form 
name 
readOnly 
rows 
type 
value 
Textarea Object Methods
select() 

↑↑

ј–’»¬ JAVASCRIPT + CSS ј–’»¬ JAVASCRIPT + CSS ј–’»¬ JAVASCRIPT + CSS
:: Х до 2005 Х 2007 Х 2008 Х 2009 Х 2010 Х 2011 ::



Ѕиблиотека JAVASCRIPT 1997 - © SE@RCHER