JavaScript Advanced Programming---CSS operations

CSS and JavaScript are two areas with a clear division of labor, the former responsible for the visual effect of the page, the latter responsible for interacting with the user's behavior. But, after all, they belong to the front end of web development, so it is inevitable to cross and cooperate with each other.

The style property of the HTML element

One of the simplest ways to manipulate the CSS style of element nodes is to read or delete the Style property of an HTML element using the GetAttribute method, setattribute method, and RemoveAttribute method of the Node object.

Div.setattribute (' style ',  ' background-color:red; '  ) + ' border:1px solid black; ');

The style property of the element node

The element node itself also provides a style property for manipulating CSS styles.

The style property points to an object that is used to read and write inline CSS styles for page elements.

var divstyle = document.queryselector (' div '). Style;divstyle.backgroundcolor = ' Red ';d ivstyle.border = ' 1px solid black ' ;d ivstyle.width = ' 100px ';d ivstyle.height = ' 100px ';d ivstyle.backgroundcolor//reddivstyle.border//1px solid Blackdivstyle.height//100pxdivstyle.width//100px

As you can see from the code above, the properties of the style object correspond to the CSS rule name one by one, but need to be rewritten. The rule is to remove the bar from the CSS property name and then capitalize the first letter after the bar, such as Background-color, as BackgroundColor. If the CSS property name is a JavaScript reserved word, then the rule name needs to be preceded by the string "CSS", such as float written as cssfloat.

The property values of the Style object are both strings and include units.

Csstext Property

The csstext of a style object can be used to read and write or delete the entire style property.

Divstyle.csstext = ' background-color:red; '  + ' border:1px solid black; '  + ' height:100px; '  + ' width:100px; ';

Csstext corresponds to the Style property of the HTML element, so you do not have to overwrite the CSS property name.

detection of CSS modules

CSS specifications are developing too fast and new modules are emerging. Different versions of different browsers support CSS modules differently. Sometimes it is necessary to know whether a module is supported by the current browser, which is called "Detection of CSS modules".

typeof Element.style.animationName = = = ' string '; typeof element.style.transform = = = ' String ';

If the CSS property does exist, a string is returned. Even if the property is not actually set, an empty string is returned. If the property does not exist, undefined is returned.

The following three methods of a style object are used to read and write inline CSS rules .

Divstyle.setproperty (' Background-color ', ' Red ');d ivstyle.getpropertyvalue (' Background-color '); Divstyle.removeproperty (' Background-color ');

The Stylesheet Object represents a style sheet for a Web page that includes a style sheet loaded by the link node and a style sheet embedded in the style node.

The StyleSheets property of the Document object, which returns all the stylesheet objects of the current page (that is, all style sheets). It is an array-like object.

var sheets = Document.stylesheets;var sheet = document.stylesheets[0];

The sheet property of the link node and the style node can also get the Stylesheet object.

HTML code for//<link id= "linkelement" href= "Http://path/to/stylesheet" >//<style id= "styleelement" >//   body{font-size:1.2 REM;} </style>//is equivalent to Document.stylesheets[0]document.queryselector (' #linkElement '). sheet// Equivalent to Document.stylesheets[1]document.queryselector (' #styleElement '). Sheet

Cssrules Property

The Cssrules property points to an array-like object in which each member is a CSS rule for the current style sheet. Using the Csstext property of the rule, you can get the string corresponding to the CSS rule.

　　

var sheet = document.queryselector (' #styleElement '). sheet;sheet.cssrules[0].csstext//"Body {background-color:red; margin:20px; } "sheet.cssrules[1].csstext//" p {line-height:1.4em; Color:blue; }"

Each CSS rule also has a style property that points to an object that is used to read and write specific CSS commands.

Stylesheet.cssrules[0].style.color = ' red '; stylesheet.cssrules[1].style.color = ' Purple ';

The Insertrule method is used to insert CSS rules in the Cssrules object of the current style sheet, and the DeleteRule method is used to remove the CSS rules for cssrules objects.

var sheet = document.queryselector (' #styleElement '). Sheet;sheet.insertrule (' #blanc {color:white} ', 0); Sheet.insertrule (' p {color:red} ', 1); Sheet.deleterule (1);

The first parameter of the Insertrule method is the string that represents the CSS rule, and the second parameter is the insertion position of the rule in the Cssrules object. The argument to the DeleteRule method is the position of the rule in the Cssrules object.

Add Style sheet

There are two ways of adding style sheets. One is to add a built-in style sheet that adds a <style> node to the document.

var style = document.createelement (' style '), Style.setattribute (' media ', ' screen '),//or Style.setattribute ("Media", " @media only screen and (max-width:1024px)); style.innerhtml = ' body{color:red} ';//Sheet.insertrule ("header {Float:l Eft opacity:0.8; } ", 1);d ocument.head.appendChild (style);

The other is to add an external style sheet that adds a link node to the document, and then points the href attribute to the URL of the external style sheet

var Linkelm = document.createelement (' link '), Linkelm.setattribute (' rel ', ' sty Rule lesheet '); Linkelm.setattribute (' Type ', ' text/css '); Linkelm.setattribute (' href ', ' reset-min.css ');d ocument.head.appendChild (Linkelm);

　　

The CSS rule deploys the Cssrule interface, which includes the following properties.

The Csstext property returns the text of the current rule.

CSS code for//body {background-color:darkblue;} var stylesheet = document.stylesheets[0];stylesheet.cssrules[0].csstext//body {background-color:darkblue;}

The Parentstylesheet property returns a style sheet object that defines the current rule.

If a CSS rule is a Normal style rule, it also deploys the Cssstylerule interface in addition to the Cssrule interface.

The Cssrule interface has the following two properties.

The Selectortext property returns the selector for the current rule.

var stylesheet = document.stylesheets[0];stylesheet.cssrules[0].selectortext//". MyClass"

The Style property returns an object that represents the style declaration of the current rule, which is the part of the curly brace that follows the selector. The object deploys the Cssstyledeclaration interface, which uses its Csstext property to return all style declarations in the form of strings.

document.stylesheets[0].cssrules[0].style.csstext//"background-color:gray;font-size:120%;"

window.getComputedStyle ()

The getComputedStyle method takes a DOM node object as a parameter and returns an object that contains the final style information for that node. The so-called "final style information" refers to the result of overlapping CSS rules.

var div = document.queryselector (' div '); window.getComputedStyle (div). backgroundcolor

The getComputedStyle method can also accept the second parameter, which represents the pseudo-element of the specified node.

var result = window.getComputedStyle (Div, ': Before ');

The getComputedStyle method returns a Cssstyledeclaration object. But at this point, the object is read-only, that is, it can only be used to read style information and cannot be set. If you want to set a style, you should use the element node's style property.

var elem = document.getElementById ("Elem-container"); var hvalue = window.getComputedStyle (elem,null). GetPropertyValue ("height");

　　

CSS Event Transitionend Event

After the CSS transition effect (transition) finishes, the Transitionend event is triggered.

El.addeventlistener ("Transitionend", Ontransitionend, False); function Ontransitionend () {  Console.log (' Transition end ');}

Animationstart events, Animationend events, animationiteration events

CSS animations have the following three events.

• Animationstart event: Triggered when the animation starts.

• Animationend event: Triggered at the end of the animation.

• Animationiteration event: Triggered when a new round of animation loops is started. If the Animation-iteration-count property equals 1, the event does not fire, that is, only one round of CSS animation is played, and the Animationiteration event is not triggered.

Div.addeventlistener (' Animationiteration ', function () {  console.log (' Finish once animation ');});

The event objects for these three events have the Animationname property (which returns the CSS property name that produces the transition effect) and the ElapsedTime property (the number of seconds the animation has elapsed). For the Animationstart event, the ElapsedTime property equals 0 unless the Animation-delay property equals a negative value.

JavaScript Advanced Programming---CSS operations