HTML Dom tutorial 41-html Dom style object

ArticleDirectory

• 2: syntax for using style object attributes:
• Csstext attributes

HTML Dom tutorial 41-html Dom style object

 

1: style object

The style object represents a separate style declaration. You can access the style object from the document or element of the application style.

2: syntax for using style object attributes:

 
Document. getelementbyid ("ID"). style. Property = "value"
 

3: attributes of the style object:

Background, border and margin, layout, list, miscellaneous, positioning, printing, scroll bar, table, text, specification.

These attributes are listed below.

3.1 Background attributes

Attribute	Description	IE	F	O	W3C
Background	Set all background attributes in a row	4	1	9	Yes
Backgroundattachment	Set whether the background image is fixed or scrolling with the page	4	1	9	Yes
Backgroundcolor	Set the background color of the element.	4	1	9	Yes
Backgroundimage	Set the background image of the element	4	1	9	Yes
Backgroundposition	Set the starting position of the background image	4	No	No	Yes
Backgroundpositionx	Set the X coordinate of the backgroundposition attribute	4	No	No	No
Backgroundpositiony	Set Y coordinates of the backgroundposition attribute	4	No	No	No
Backgroundrepeat	Set whether and how to repeat the background image	4	1	9	Yes

3.2 border and margin attributes

Attribute	Description	IE	F	O	W3C
Border	Set all attributes of the four borders in one row	4	1	9	Yes
Borderbottom	Set all attributes of the bottom border in one row	4	1	9	Yes
Borderbottomcolor	Set the background border color	4	1	9	Yes
Borderbottomstyle	Set the style of the Bottom Border	4	1	9	Yes
Borderbottomwidth	Set the Bottom Border Width	4	1	9	Yes
Bordercolor	Set the color of all four borders (four colors can be set)	4	1	9	Yes
Borderleft	Set all attributes of the Left Border in one row	4	1	9	Yes
Borderleftcolor	Set the color of the Left Border	4	1	9	Yes
Borderleftstyle	Set the style of the Left Border	4	1	9	Yes
Borderleftwidth	Set the width of the Left Border	4	1	9	Yes
Borderright	Set all attributes of the right border in one row	4	1	9	Yes
Borderrightcolor	Set the color of the Right Border	4	1	9	Yes
Borderrightstyle	Set the style of the Right Border	4	1	9	Yes
Borderrightwidth	Set the width of the Right Border	4	1	9	Yes
Borderstyle	Set the style of all four borders (four styles can be set)	4	1	9	Yes
Bordertop	Set all attributes of the top border in one row	4	1	9	Yes
Bordertopcolor	Set the top border color	4	1	9	Yes
Bordertopstyle	Set the top border Style	4	1	9	Yes
Bordertopwidth	Set the width of the top border	4	1	9	Yes
Borderwidth	Set the width of all four borders (four widths can be set)	4	1	9	Yes
Margin	Set the margin of the element (four values can be set)	4	1	9	Yes
Marginbottom	Set the base margin of an element	4	1	9	Yes
Marginleft	Set the left margin of the element	4	1	9	Yes
Marginright	Set the data on the right of an element	4	1	9	Yes
Margintop	Set the top margin of an element	4	1	9	Yes
Outline	Set all outline attributes in one row	5 m	1	9	Yes
Outlinecolor	Set the outline color around the element	5 m	1	9	Yes
Outlinestyle	Set outline styles around Elements	5 m	1	9	Yes
Outlinewidth	Set the outline width around the element	5 m	1	9	Yes
Padding	Set element filling (four values can be set)	4	1	9	Yes
Paddingbottom	Set the bottom filling of the element	4	1	9	Yes
Paddingleft	Set the left filling of the element	4	1	9	Yes
Paddingright	Set the right filling of the element	4	1	9	Yes
Paddingtop	Set the top filling of the element	4	1	9	Yes

3.3 layout attributes

Attribute	Description	IE	F	O	W3C
Clear	Specifies which side of the element does not allow other floating elements.	4	1	9	Yes
Clip	Set the element shape	4	1	9	Yes
Content	Set metadata	5 m	1		Yes
Counterincrement	After this parameter is set, it is a list of positive counter names. An integer indicates the increment of the counter whenever an element appears. The default value is 1.	5 m	1		Yes
Counterreset	After this parameter is set, it is a list of positive counter names. An integer indicates the value set for the counter whenever an element appears. The default value is 0.	5 m	1		Yes
Cssfloat	Set where the image or text will appear (float) in another element.	5 m	1	9	Yes
Cursor	Set the displayed pointer type	4	1	9	Yes
Direction	Set the text direction of an element	5	1	9	Yes
Display	Set how the element is displayed	4	1	9	Yes
Height	Set the height of an element	4	1	9	Yes
Markeroffset	Set the distance between the principal box of the marker box and the border edge closest to it.	5 m	1		Yes
Marks	Set whether cross marks or crop marks should be present only outside the page box edge	5 m	1		Yes
Maxheight	Sets the maximum height of an element.	5 m	1	9	Yes
Maxwidth	Set the maximum width of an element.	5 m	1	9	Yes
Minheight	Sets the minimum height of an element.	5 m	1	9	Yes
Minwidth	Set the minimum width of an element.	5 m	1	9	Yes
Overflow	Specifies how to handle content that is not suitable for element boxes	4	1	9	Yes
Verticalalign	Set vertical arrangement of content in the element	4	1	No	Yes
Visibility	Set whether the element is visible	4	1	9	Yes
Width	Set the element width.	4	1	9	Yes

3.4 List attributes

Attribute	Description	IE	F	O	W3C
Liststyle	Set all attributes of the list in one row	4	1	9	Yes
Liststyleimage	Set the image as a list item mark	4	1	No	Yes
Liststyleposition	Change the position of the list item tag	4	1	9	Yes
Liststyletype	Set the type of the list item tag	4	1	9	Yes

3.5 positioning attributes

Attribute	Description	IE	F	O	W3C
Bottom	Sets the distance between the bottom edge of an element and the top or bottom edge of the parent element.	5	1	9	Yes
Left	The distance between the left edge of an element and the left or right edge of the parent element.	4	1	9	Yes
Position	Place the element in the position of static, relative, absolute or fixed.	4	1	9	Yes
Right	Distance from the right edge of an element to the left or right of the right edge of the parent Element	5	1	9	Yes
Top	Sets the distance between the top edge of an element and the top or bottom edge of the parent element.	4	1	9	Yes
Zindex	Set the stacking order of Elements	4	1	9	Yes

3.6 printing attributes

attribute	description	ie	F	O	W3C
orphans	set the minimum number of lines left at the bottom of the section	5 m	1	9	Yes
page	set the page type used to display an element	5 m	1	9	Yes
pagebreakafter	set the paging behavior after an element	4	1	9	Yes
pagebreakbefore	set the paging behavior before an element	4	1	9	Yes
pagebreakinside	set the paging behavior inside an element	5 m	1	9	Yes
size	set the page direction and size		1	9	Yes
widows	set the minimum number of lines that must be left at the top of the page	5 m	1	9	Yes

3.7 scrollbar attributes (ie-only)

Attribute	Description	IE	F	O	W3C
Scrollbar3dlightcolor	Set the color of the arrow and the left and top sides of the scroll bar.	5 W	No	No	No
Scrollbararrowcolor	Set the arrow color on the scroll bar	5 W	No	No	No
Scrollbarbasecolor	Set the background color of the scroll bar	5 W	No	No	No
Scrollbardarkshadowcolor	Set the color of the right and bottom sides of the arrow and scroll bar	5 W	No	No	No
Scrollbarfacecolor	Set the table color of the scroll bar.	5 W	No	No	No
Scrollbarhighlightcolor	Set the color of the arrow and the left and top sides of the scroll bar, and the background of the scroll bar.	5 W	No	No	No
Scrollbarshadowcolor	Set the color of the right and bottom sides of the arrow and scroll bar	5 W	No	No	No
Scrollbartrackcolor	Set the background color of the scroll bar	5 W	No	No	No

3.8 table attributes

Attribute	Description	IE	F	O	W3C
Bordercollapse	Set whether the table border is merged into a single border or separated as in standard HTML.	5	1	9	Yes
Borderspacing	Set the distance between the border of the split Cell	5 m	1	9	Yes
Captionside	Set the table title Position	5 m	No	No	Yes
Emptycells	Set whether to display empty cells in the table	5 m	1	9	Yes
Tablelayout	SetAlgorithm	5	No	No	Yes

3.9 text attributes

Attribute	Description	IE	F	O	W3C
Color	Set text color	4	1	9	Yes
Font	Set all font attributes in one row	4	1	9	Yes
Fontfamily	Set the font family of the element.	4	1	9	Yes
Fontsize	Set the font size of the element.	4	1	9	Yes
Fontsizeadjust	Set/adjust text size	5 m	1	No	Yes
Fontstretch	Set how to compress or stretch Fonts	5 m	No	No	Yes
Fontstyle	Set the font style of the element	4	1	9	Yes
Fontvariant	Display text with small uppercase letters	4	1	9	Yes
Fontweight	Set Font width	4	1	9	Yes
Letterspacing	Set Character Spacing	4	1	9	Yes
Lineheight	Set row spacing	4	1	9	Yes
Quotes	Set the quotation marks used in the text.	5 m	1		Yes
Textalign	Arrange text	4	1	9	Yes
Textdecoration	Set text Modifier	4	1	9	Yes
Textindent	Tighten the text of the first line	4	1	9	Yes
Textshadow	Set text shadow effect	5 m	1		Yes
Texttransform	Set uppercase effects on Text	4	1	9	Yes
Unicodebidi		5	1		Yes
Whitespace	Set how to set line breaks and blank spaces in text	4	1	9	Yes
Wordspacing	Set word spacing in text	6	1	9	Yes

3.10 Standard attributes

Attribute	Description	IE	F	O	W3C
Dir	Set or return the direction of the text	5	1	9	Yes
Lang	Set or return element LanguageCode	5	1	9	Yes
Title	Sets or returns the consulting title of an element.	5	1	9	Yes

3.11 Other attributes Csstext attributes

It is a text representation of a set of style attributes and their values. This text is formatted as a CSS style sheet, removing the curly brackets of the element selector that enclose attributes and values. Setting this attribute to an invalid value throws a domexception code syntax_err. When the css2properties object is read-only, an domexception code no_modification_allowed_err is thrown when you try to set this attribute.

About css2properties objects

The css2properties object indicates a set of CSS style attributes and their values. It defines JavaScript attributes for each CSS attribute defined by the CSS specification. The style attribute of an htmlelement is a readable and writable css2properties object, just like the style attribute of a cssrule object.

However, the return value of window. getcomputedstyle () is a css2properties object, and its attribute is read-only.