Operation object attributes in JavaScript

Operation object attributes in JavaScript

1. Operation Object Attributes

Note:

Relationship between tag attributes and DOM object attributes:

The vast majority of users are the same, for example, the imgobj. src attribute corresponds to the src attribute, but there are exceptions, such

.

 

The correspondence between CSS attributes and DOM object attributes:

1. Both of them pass the obj.style.css attribute name, for example, obj. style. width.

2. If the CSS attribute has a horizontal line, such as border-top-style, remove the horizontal line and uppercase letters after the horizontal line. For example, obj. style. borderTopStyle.

 

Example:

 

Click the div to make the background color red and green alternate, increase the width and height by 5 PX, and increase the bottom border by 1 px; <script type = text/javascript> function a () {var div = document. getElementsByTagName ('div ') [0]; if (div. className. indexOf ('test1')> = 0) {div. className = 'test2';} else {div. className = 'test1';} div. style. width = parseInt (div. style. width) + 10 + 'px '; div. style. height = parseInt (div. style. height) + 10 + 'px '; div. style. borderBottomWidth = parseInt (div. style. borderBottomWidth) + 1 + 'px ';} </script>

 

Obtain the calculated style of an object in the memory:

Use obj. currenStyle and window. getComputedStyle.

Note: Only IE and Opera support using currentStyle to obtain the calculated style of HTML Element, which is not supported by other browsers. Standard browsers use getComputedStyle. IE9 and later also support getComputedStyle.

 

Window. getComputedStyle (obj, pseudo element );

Parameter description: 1. The first parameter is the target element of the calculated style.

2. The second parameter is the expected pseudo element, such as ': after' and': first-letter '. It is generally set to null.

 

Function getStyle (obj, attr) {return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, null) [attr];} // encapsulate functions based on compatibility.

The modified version in the preceding example: the modified version places the style attribute of CSS outside the body.

 

Click the div to make the background color red and green alternate, increase the width and height by 5 PX, and increase the Bottom Frame by 1 px; <script type = text/javascript> function getStyle (obj, attr) {return obj. currentStyle? Obj. currentStyle [attr]: getComputedStyle (obj, null) [attr];} // encapsulate functions based on compatibility. Function a () {var div = document. getElementsByTagName ('div ') [0]; if (div. className. indexOf ('test1')> = 0) {div. className = 'test2';} else {div. className = 'test1';} // alert (getStyle (div, 'width'); // return; div. style. width = parseInt (getStyle (div, 'width') + 10 + 'px'; div. style. height = parseInt (getStyle (div, 'height') + 10 + 'px'; div. style. borderBottomWidth = parseInt (getStyle (div, 'borderbottomwidth ') + 1 + 'px';} </script>