JavaScript CSS Modification Learning Chapter 2 Style_Basic Knowledge

Additionally, sometimes you may want to know the specific content of a style added to an element or link. The style attribute can only read the inline style of the element, so if you want to read other styles, you have to find another way.

Offset
Before using some tricks, IE and Mozilla have added a better method: offsetSomething. Using these properties you can read some of the more important styles of this paragraph.
For example, use offsetWidth. You can know the pixel value of the current width of this paragraph. To test, you can resize the window and run it again.
The code is also very simple:

Copy code The code is as follows:

function getOff( )
{
x = document.getElementById('test');
return x.offsetWidth;
}

Then we display this value in the form of an alert box :alert('offsetWidth = ' getOff()).
Now you have the pixel value of this paragraph in the user's browser, and you can perform some calculations. Here are some other properties you can read:
offsetHeight: the pixel value of the height
offsetLeft: the pixel value of the distance to the left (what's left? see below)
offsetTop: the pixel value of the distance above (what's above ? See below)
offsetWidth: pixel value of width
Note that these properties are read-only and you cannot modify them directly.
For convenience of explanation, I have prepared a small piece of code. First move this paragraph over.
Then we add 100 pixels to its width. If we look at offsetWidth at this time, we will see the change. You can also reduce it by 100 pixels and view it.
If you view it in two browsers, there may be differences. In IE it is the original width of 100 pixels, but in Mozilla it is not. Because Mozilla's is more standard: it only checks the width of the content, while IE will add the width of margins and borders. Although Mozilla's is more correct, I prefer IE's because it is more intuitive.
If you don’t mind Mozilla/IE compatibility, the code is still very simple:

Copy the code The code is as follows:

function changeOff(amount)
{
var y = getOff();
x.style.width = y amount;
}

We pass the amount of the value to be changed to the function, then use the getOff() function to obtain the original size and store it in y. Finally, we use the original size and the value that needs to be changed to resize the element.
offsetWidth/Top
For their definitions, please see the previous chapter.

Get the style
We see that the offset attribute has great limitations. Browsers give us some more convenient ways to access element styles but unfortunately they are not as reliable and versatile as offset.
Mozilla and Opera
Mozilla and Opera prefer to use CSS-style expressions instead of JavaScript. For example, if you want to get the font size, you need to use CSS's font-size instead of JavaScript's fontsize.
Mozilla supports very few styles. For example, border[-somthing] has a null value in Mozilla, but Opera can give an accurate value.
IE
In IE we can get a lot of style information, but we must be careful. In this example border doesn't work, you need borderStyle, borderWidth, borderColor.
Note that the border-width attribute must be spelled borderWidth in JavaScript. Because this connecting line may be considered as a minus sign.
Also, IE often gives the auto value. Although this is a real value, it is of little use. So sometimes you have to use offset.

Code
The code is still very simple:

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

Copy code The code is as follows:

function getStyle( el,styleProp) {

Then we save the elements in 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 the Mozilla method: use the getComputeStyle() method, which is also feasible in Opera

[code] else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); Then return y to the program that calls this function.

Copy code


The code is as follows:

return y;
}

Although this function is not perfect, it is still within its capabilities. Translation address: http://www.quirksmode.org/dom/getstyles.html Please keep the following information for reprinting Author: Bei Yu (tw: @rehawk)