Javascript CSS modification and learning Chapter 2 style

In addition, you may want to know the specific content of the style added to an element or link. The style attribute can only read inline styles of elements, so if you want to read other styles, you have to find another method.

Offset
Before using some tips, ie and Mozilla have added a better method: offsetsomething. With these attributes, you can read some of the most important styles in this section.
For example, offsetwidth is used. You will be able to know the pixel value of the current width of this section. To test the window size, you can change the window size and run it again.
CodeIt is also very simple:Copy codeThe Code is as follows: function Getoff ()
{
X = Document. getelementbyid ('test ');
Return X. offsetwidth;
}

Then we will display this value in the form of a warning box: Alert ('offsetwidth = '+ Getoff ()).
Now you get the pixel value of this section in your browser, and you can perform some operations. The following are some other attributes that you can read:
Offsetheight: The height pixel value.
Offsetleft: The pixel value to the left (what left? See below)
Offsettop: distance from the above pixel value (above what? See below)
Offsetwidth: The pixel value of the width.
Note that these attributes are read-only and cannot be modified directly.
For convenience, I have prepared a short piece of code. First, move the paragraph.
Then we increase his width by 100 pixels. If we check offsetwidth at this time, we will see the change. You can also reduce the number of pixels by 100 and view them.
If you view it in two browsers, it may be different. In ie, the original width is + 100 pixels, but not in Mozilla. Because Mozilla is more standard: It only views the width of the content, while ie adds the margin and Border width. Although Mozilla is correct, I prefer ie because it is more intuitive.
If you don't mind Mozilla/ie compatibility, the code is quite simple:Copy codeThe Code is as follows: function changeoff (amount)
{
Var y = Getoff ();
X. style. width = Y + amount;
}

We pass the amount value to be changed to the function, and then use the Getoff () function to obtain the original size and store it in Y, finally, we use the original size and the value to be changed to re-determine the size of the element.
Offsetwidth/top
For more information about their definitions, see the previous chapter.

Get Style
We can see that the offset attribute has great limitations. The browser gives us some more convenient methods to access element styles, but unfortunately their reliability and versatility are less than offset.
Mozilla and opera
Mozilla and opera prefer CSS expressions instead of JavaScript expressions. For example, you must use the font-size of CSS instead of the fontsize of JavaScript to obtain the font size.
Mozilla supports few styles. For example, border [-somthing] is null in Mozilla, but opera can provide accurate values.
IE
We can get a lot of style information in IE, but we must be careful. In this example, border does not work. You need borderstyle, borderwidth, and bordercolor.
Note that the border-width attribute must be spelled borderwidth in JavaScript. This connection line may be considered as a minus sign.
In addition, ie often gives auto values. Although this is a real value, it is useless. So sometimes offset is used.

Code
The code is still simple:Copy codeThe Code is as follows: function getstyle (El, styleprop)
{
VaR x = Document. getelementbyid (EL );
If (X. currentstyle)
Var y = x. currentstyle [styleprop];
Else if (window. getcomputedstyle)
Var y = Document. defaultview. getcomputedstyle (x, null). getpropertyvalue (styleprop );
Return y;
}

First, we pass the element ID and the style name we want to access.Copy codeThe Code is as follows: function getstyle (El, styleprop ){

Then we save the elements in X:Copy codeThe Code is as follows: var x = Document. getelementbyid (EL );

The first is the IE Method: The currentstyle attribute of the element.Copy codeThe Code is as follows: if (X. currentstyle) 2 var y = x. currentstyle [styleprop];
Then the Mozilla method: The getcomputestyle () method is also feasible in opera.
[Code] else if (window. getcomputedstyle)
Var y = Document. defaultview. getcomputedstyle (x, null). getpropertyvalue (styleprop );

Then, callProgramReturns y.Copy codeThe Code is as follows: Return y;
}

Although this function is not perfect, it is within its capacity.

http://www.quirksmode.org/dom/getstyles.html
reprinted Please retain the following information
author: Beiyu (TW: @ rehawk)