Action inline style

Modify the style of elements through JS:

Syntax: elements style . Style name = style value

Example:

box1.style.width = "300px";

Note: if the style name of CSS contains -,
This name is illegal in JS, such as background color
You need to change the style name to hump naming method, backgroundColor

The styles we set through the style attribute are all inline styles,
Inline styles have higher priority, so styles modified through JS tend to be displayed immediately

But if it's written in the style! important, then the style will have the highest priority,
This style cannot be overwritten even through JS, which will lead to the invalidation of JS modified style
So try not to add to the style! important

Read the style of the element

Read the style of box1

var btn02 = document.getElementById( "btn02");
btn02.onclick = function(){
alert(box1.style.backgroundColor);
};

Syntax: elements style . Style name

Inline styles are set and read through the style property
Unable to read properties in style sheet

//Click the button to read the style of box1
var box1 = document.getElementById("box1");
var btn01 = document.getElementById( "btn01");
btn01.onclick = function( ){
//Read the width of box1
//alert(box1. style.width);

Gets the current display style of the element
Syntax: elements currentStyle . Style name

alert(box1.currentStyle.width);

It can be used to read the style that the current element is displaying
If the style is not set for the current element, get its default value

currentStyle is only supported by IE browser, and other browsers do not support it

In other browsers, you can use getComputedstyle() to get the current style of the element
This method is a window method and can be used directly
Two parameters are required
First: the element to get the style
Second: you can pass a pseudo element, usually null

alert(getComputedStyle(box1,null).width);

This method will return an object that encapsulates the style corresponding to the current element
You can use objects Style name to read the style
If the obtained style is not set, the real value will be obtained instead of the default value
For example, if width is not set, it will not get auto, but a length

However, this method does not support browsers of E8 and below

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

Build function read style

Defines a function to get the current style of the specified element
Parameters:
obj the element to get the style
Name the style name to get

function getStyle(obj,name){

    //Normal browser mode
    //return getComputedStyle(obj ，null) [name];
    //IE8 mode
    //return obj.currentStyle[name] ;
}

In order to be more compatible with the browser to obtain styles, you can use the following methods

function getStyle(obj ，name){
    if(window. getComputedstyle){
//Normal browser mode with getComputedStyle() method
       return getComputedStyle(obj,null)[name];
    }else{
//In IE8 mode, there is no getComputedstyle() method
        return obj.currentStyle[name]; 
}
    //perhaps
    return window. getComputedstyle?getComputedstyle(obj,null)[name]:obj.currentStyle[name];
}

clientWidth
clientHeight
These two attributes can get the visible width and height of the element
These properties are all without px, and the return is a number, which can be calculated directly
Gets the width and height of the element, including the content area and the inner margin
These properties are read-only and cannot be modified

offsetWidth
offsetHeight
Gets the entire width and height of the element, including the content area, inner margin, and border

offsetParent
Can be used to get the positioning parent element of the current element
The nearest ancestor element with positioning enabled from the current element will be obtained
If all ancestor elements have not enabled positioning, body is returned

offsetLeft
The horizontal offset of the current element relative to its parent element
offsetTop
The vertical offset of the current element relative to its parent element

scrollWidth
scrollHeight
You can get the width and height of the entire scrolling area of the element

When scrollHeight - scrollTop = clientHeight is satisfied
Indicates that the vertical scroll bar has scrolled to the end

When scrollWidth - scrollLeft = clientWidth is satisfied
Indicates that the horizontal scroll bar scrolls to the end

If you add disabled= "disabled" to a form item, the form item becomes unavailable

Make form items available when the vertical scroll bar scrolls to the bottom
onscroll
This event is triggered when the element's scroll bar scrolls

User registration manual example

(check and registration are allowed only when the scroll bar reaches the bottom)

//Get the p element with id info
var info = document.getElementById("info");
//Get two form items
var inputs = document.getElementByTayName("input");
//Bind a scroll bar event for info
info.onscroll = function(){
//Check that the vertical scroll bar scrolls to the bottom
    if(info.scrollHeight - info.scrollTop == info.clientHeight ){
//Scroll bar scrolls all the way to make form items available
/*
disabled Property to set whether an element is disabled,
If set to true, the element is disabled
 If set to false, the element is available
*/
        inputs[0].disabled = false; 
        inputs[1].disabled = false;
 }
};