Shulou(Shulou.com)05/31 Report--

This article mainly explains "how js controls css". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how js controls css".

The way js controls css: 1, change the style through the style attribute or "setAttribute ()"; 2, change the "content" content of the pseudo class "(after,before)"; 3, change the style by changing the class name, and so on.

This article operating environment: windows7 system, javascript1.8.5&&CSS3 version, DELL G3 computer

How does js control css?

Several ways of controlling css style by JS

In the work and study of js, we always encounter some situations where it is not easy to dynamically load css styles through the style attribute (eg: pseudo-class style control, animation style control). Here are several ways for js to change styles:

1. Change the style through the style property or setAttribute ()

The most commonly used ele.style.cssText='width:50px';// in ele.style.width='50px';// will not cover all the previous cssele.style.setProperty ("width", "50px", "important"); / / you can pass the third parameter ele.setAttribute ("style", "width:50px") / / will not cover all the previous css rest assured that ele.style.width='50px';// is the most commonly used ele.style.cssText='width:50px'. / / will not cover all previous cssele.style.setProperty ("width", "50px", "important"); / / you can pass the third parameter ele.setAttribute ("style", "width: 50px") / / will not cover all previous css rest assured

2, you can do the same if you just change the content content of the after,before.

/ / css code div::after {content:attr (data-myadd); width:10px;} / / js code div.setAttribute ('data-myadd', needs to be dynamically loaded) / / css code div::after {content:attr (data-myadd); width:10px;} / / js code div.setAttribute (' data-myadd', needs to be dynamically loaded)

3, change the style by changing the class name

Ele.className='';ele.classList.add (); / / emmmm has nothing to say ele.className='';ele.classList.add (); / / emmmm has nothing to say

4, so here's the point: we get all the stylesheets with document.styleSheets, and then select a stylesheet to add styles through insertRule, or we can create a new cssRules and add styles through addRule ()

Document.styleSheets: get the collection of all the stylesheets href: the stylesheet introduced through the link tag is the URL of the stylesheet, otherwise it is nullmedia: the collection of all media types supported by the current stylesheet type: the string of the stylesheet type disabled: the stylesheet is masked by disabled and can be used to switch stylesheets; document. StyleSheets [I]. Styles = truecssRules: is the collection of all styles in the current style list IE does not support insertRule (rule,index): inserts a new rule rule before index; document.styleSheets [0] .insertRule ('* {style}', 0) does not support IE Document.styleSheets [0] .addRule ('*','{background:blue;color:#000}', 0) supports IE;deleteRule (index): delete the index of a CCTV list IE uses removeRule (index) / / when using document.styleSheets to get the stylesheet, it's best to get the last one, adding the style var sheets=document.styleSheets;var lastSheet= sheets [sheets.length-1] to the last stylesheet; lastSheet.insertRule ('# div {width:10px}', index) / / adding the # div style directly to the cssRules; index is added to the article; modern browser lastSheet.addRule ('div','width:10px ', 0) / / IE browser / / it's best to get the last one when using document.styleSheets to get the stylesheet, adding the style var sheets=document.styleSheets;var lastSheet= sheets [sheets.length-1] to the last stylesheet; lastSheet.insertRule (' # div {width:10px}', index) / / add the # div style directly to the cssRules; which item is index added to; modern browser lastSheet.addRule ('div','width:10px;',0) / / IE browser

5. Dynamically load stylesheets

If there are many styles that need to be changed, it is recommended to change the page style by dynamically loading the style.

/ / change the reference to the style file function loadStyle (url) {var link = document.createElement ('link'); link.type =' text/css'; link.rel = 'stylesheet'; link.href = url; var head = document.getElementsByTagName (' head') [0]; head.appendChild (link);} loadStyle ('test.css'); / / dynamically load css code snippet var style = document.createElement (' style'); style.type = 'text/css' Style.rel = 'stylesheet'; try {/ / Chrome Firefox Opera Safari style .appendChild (document.createTextNode (code));} catch (ex) {/ / IE style.styleSheet.cssText = code;} var head = document.getElementsByTagName (' head') [0]; head.appendChild (style);} loadCssCode ('body {background-color:#f00}') / / change the reference to the style file function loadStyle (url) {var link = document.createElement ('link'); link.type =' text/css'; link.rel = 'stylesheet'; link.href = url; var head = document.getElementsByTagName (' head') [0]; head.appendChild (link);} loadStyle ('test.css'); / / dynamically load css code snippet var style = document.createElement (' style') Style.type = 'text/css'; style.rel =' stylesheet'; try {/ / Chrome Firefox Opera Safari style .appendChild (document.createTextNode (code));} catch (ex) {/ / IE style.styleSheet.cssText = code;} var head = document.getElementsByTagName ('head') [0]; head.appendChild (style);} loadCssCode (' body {background-color:#f00}') Thank you for your reading, the above is the content of "how js controls css". After the study of this article, I believe you have a deeper understanding of how js controls css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.