JS study notes 13-operation inline style

One, modify the style of the element through JS

1. Syntax: element.style.style name=style value (string).

box.style.width="300px";

2. Note: If the css style name contains -, this kind of name is illegal in JS, such as background-color, you need to modify this style name to camel case naming.

box.style.backgroundColor="yellow";

3. The styles set by the style attribute are all inline styles, and inline styles have a higher priority, so the styles modified through JS are often displayed immediately, but if they are written in the style! important, the style will have the highest priority at this time, so the style cannot be overwritten even through JS. At this time, it will cause the JS to modify the style invalid, so try not to add it to the style! important.

Two, read the style of the element

1. Syntax: element.style.style name

alert(box.style.width);

2. All inline styles are set and read through the style attribute, and the styles in the style sheet cannot be read.

3. Read the style
   syntax in the element table : element.currentStyle.style name
   It can be used to read the style of the current element being displayed.
   currentStyle is only supported by IE.
   In other browsers, you can use the getComputedStyle() method to get the current style of the element. , This method is a window method, you can use it directly

4. getComputedStyle()
   requires two elements: ①To
   get the element of the style, ②You
   can pass a pseudo-element, generally null.
   This method will return an object. The object encapsulates the style corresponding to the current element,
   so you need to call this object to get it. A certain style
   
   If the obtained style is not set, the real value will be obtained instead of the default value. For
   example, if the width is not set, the aotu will not be obtained, but a real value will be returned.
   But this method does not support IE8 and below browsers.

The styles read through currentStyle and getComputedStyle() are read-only and cannot be modified. If you want to modify it, you must pass the style attribute.

5. Define a function to get the current style of the specified element.
   Parameters:
   ①obj the element of the style to be obtained
   ②name the name of the style to be obtained
   

Second, the attributes of other styles

1.clientWidth clientHeight

These two attributes can get the visible width and height of the element.
These attributes are all without px, and the return is a number, which can be calculated directly.
The width and height of the element will be obtained, including the content area and the inner margin.
These attributes are read-only, but cannot be changed.

2.offsetWidth offsetHeight

Get the entire width and height of the element, including the content area, padding and border

3.offsetParent

It can be used to get the positioning parent element of the current element. It
will get the ancestor element that is closest to the current element with positioning turned on.
If all ancestor elements have not turned on positioning, the body will be returned.

4.offsetLeft offsetTop

offsetLeft: the current element is equivalent to the horizontal offset of its parent element
offsetTop: the current element is equivalent to the vertical offset of its parent element

5.scrollWidth scrollHeight scrollLeft scrollTop

overflow:auto;
scrollWidth scrollHeight: You can get the height or width of the entire scrolling area of ​​the element
scrollLeft scrollTop: You can get the distance of the horizontal or vertical scroll bar

When scrollHeight -scrollTop==clientHeight is satisfied, it means that the vertical scroll is to the end.
When scrollWidth-scrollLeft == clientWidth is satisfied, it means that the horizontal scroll is in the end.

3. User registration agreement exercise

1. Onscroll This event will be triggered when the element scrolls