JavaScript CSS Modify Learning Chapter II Style _ Basics

In addition, sometimes you might want to know the specifics of the style added to an element or link. The Style property can only read the inline form of the element, so if you want to read the other styles, you'll have to find another way.

Offset
Before using some tips, ie and Mozilla have added a better approach: offsetsomething. You can use these properties to read some of the more important styles of the paragraph now.
For instance, use Offsetwidth. You'll know the pixel value of the width of the paragraph now. To test, you can change the size of the window and then run it again.
The code is also very simple:

Copy Code code as follows:

function Getoff ()
{
x = document.getElementById (' test ');
return x.offsetwidth;
}

We then display this value in the form of a warning box: alert (' offsetwidth = ' + Getoff ()).
Now that you have the pixel value of the paragraph in the user's browser, you can do some calculations. Here are some other properties you can read:
Offsetheight: Pixel value of height
Offsetleft: The pixel value from the left (what is left?) See below)
offsettop: The pixel value from above (what?) See below)
Offsetwidth: Pixel Value of width
Note that these properties are read-only and you cannot modify them directly.
For the sake of illustration, I prepared a short piece of code. First, move the passage.
Then we added 100 pixels to his width. If we look at offsetwidth this time, we will see the change. You can also reduce the 100 pixel and then view.
If you look in both browsers, there may be a difference. In IE is the original width of +100 pixels, but in Mozilla is not. Because Mozilla is more standard: he just looks at the width of the content, and IE adds margins and the width of the border. Although Mozilla is more correct, but I prefer IE, because more intuitive.
If you don't mind mozilla/ie compatibility, the code is simple:

Copy Code code as follows:

function Changeoff (amount)
{
var y = Getoff ();
X.style.width = y + amount;
}

We pass the function to change the value amount, then use the Getoff () function to get the original size and then stored in Y, and finally we use the original size and need to change the value to determine the size of the element.
Offsetwidth/top
For their definition, see in the previous chapter.

Get style
We see that the offset attribute is very limited. Browsers have given us some more convenient ways to access element styles but unfortunately their reliability and versatility are less than offset.
Mozilla and Opera
Mozilla and Opera are more likely to use CSS expressions than JavaScript. For example, if you want to get the font size you need to use CSS font-size instead of JavaScript fontsize.
Mozilla supports a very small number of styles. For example, border[-somthing] is a null value in Mozilla, but opera can give an accurate value.
Ie
We can get a lot of style information in IE, but we must be careful. In this case border doesn't work, you need borderstyle,borderwidth,bordercolor.
Note that the Border-width attribute must be spelled borderwidth in JavaScript. Because this connector may be considered a minus sign.
In addition, ie often gives the auto value. Although this is a true value, it is of no use. So sometimes you have to use offset.

Code
The code is still simple:

Copy Code code 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 ID of the element and the name of the style that we want to access

Copy Code code as follows:

function GetStyle (el,styleprop) {

Then we save the element in X:

Copy Code code as follows:

var x = document.getElementById (EL);

The first is the IE method: The Currentstyle attribute of the element

Copy Code code as follows:

if (X.currentstyle) 2 var y = X.currentstyle[styleprop];
Then there is the Mozilla method: Using the Getcomputestyle () method is also possible in opera
[Code] else if (window.getComputedStyle)
var y = Document.defaultView.getComputedStyle (x,null). GetPropertyValue (Styleprop);

Then return y to the program that called the function.

Copy Code code as follows:

return y;
}

Although this function is not perfect, it is already within the reach of it.

Translation Address: http://www.quirksmode.org/dom/getstyles.html
Reprint please keep the following information
Author: North Jade (TW: @rehawk)