[Translated works] JavaScript CSS modification learning Chapter 2: Style

Document directory

• Offsetwidth/top
• Mozilla and opera
• IE

Sometimes you want to see the default style of the document. For example, if the width of a paragraph is 50%, you want to know the exact pixel of the paragraph in the user's browser.

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.

The Code is also very simple:

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:
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:
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.
function getStyle(el,styleProp){
Then we save the elements in X:
var x = document.getElementById(el);
The first is the IE Method: The currentstyle attribute of the element.
if (x.currentStyle)var y = x.currentStyle[styleProp];
Then the Mozilla method: The getcomputestyle () method is also feasible in opera.
else if (window.getComputedStyle)var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
Then return Y to the program that calls this function.
return y;}
Although this function is not perfect, it is within its capacity.
 
Http://www.quirksmode.org/dom/getstyles.html