DOM - node operation

Change the properties of the style

style attribute

className attribute

style attribute

HTML Elements .style. Style attribute ＝" value "

document.getElementById("titles").style.color="#ff0000";

document.getElementById("titles").style.fontSize="25px ";

className attribute

 1、HTML Elements .className=" Style name "

function over(){

     document.getElementById("a").className="c";

     document.getElementById("b").className="d"

}

 // * Continuous addition className

        document.querySelector("div").classList.add = "div";

Elements .classList.remove="div" Delete the previous class name

Elements .classList.replace（“”,“”）="div" t  Replace the existing class name , The first parameter finds the existing class name , The second parameter is replaced class name

Get the style of the element

HTML Elements .style. Style attribute ;

alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle( Elements ,null)

var cartList=document.getElementById("cartList");

alert(document.defaultView.getComputedStyle(cartList,null).display

getComputedStyle The obtained styles are the most complete , You can even get style Attribute values of inline styles

compatible IE browser

alert(document.getElementById("cartList").currentStyle.display);

currentStyle Method , be-all IE All versions of browsers support , Google doesn't support currentStyle Method , For internal styles , External style

 

Operation node style

How to move the mouse div According to the content ？

name describe

onclick An event is called when the user clicks on an object

onmouseover Mouse over an element

onmouseout Move the mouse away from an element

onmousedown Mouse button pressed

onmousepress  The mouse button is triggered when it is pressed, but it does not recognize function keys, such as ctrl shift Key head, etc

onmouseup      The mouse button is raised , Triggered when released

HTML Element attributes in

Element attribute application

attribute explain

offsetLeft Returns the distance from the left boundary of the current element to the left boundary of its parent element , Read-only property

offsetTop Returns the distance from the upper boundary of the current element to the upper boundary of its parent element , Read-only property

offsetHeight Returns the height of an element

offsetWidth Returns the width of an element

offsetParent Returns the offset container of the element , That is, references to the most recent dynamic positioning containing elements

If it is position :absolute The parent is position:relative, therefore offsetParent Value of is parent ;

If it is position :absolute The parent has no location ,offsetParent The value of is body

If it is position :fixed Is the parent positioned ,offsetParent The values are all null

clientWidth Returns the visible width of the element

clientHeight Returns the visible height of the element

clientWidth 、clientHeight barring border Size ,offsetHeight and offsetWidth Include border Size

Standard browser

scrollTop Returns the vertical position of the matching element's scroll bar

scrollLeft Returns the horizontal position of the matching element's scroll bar

It can be recognized in Google browser  Chrome

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

The following writing is only for the lower version Ie browser , for example IE5

document.body.scrollTop;

document.body.scrollLeft;

Solve compatibility problems ：

var sop=document.documentElement.scrollTop||document.body.scrollTop;

Example ： Subject requirements ： Make sure that the box scrolls up and down the browser