【From Line Style Acquisition】
<div id='div1' style="backgroud:red">test</div> <script> var odiv=document.getElementById('div1'); //First get the element tag to get the style, that is, get div1 console.log(odiv.style.background); //So that we can get the style between lines</script>【Integrated Style Acquisition】
<html> <head> <style> .div2{ background:red; } </style> </head> <body> <div id="div1">test</div> <script> var odiv=document.getElementById('div1'); //First get the element tag to get the style, that is, get div1 //console.log(getComputedStyle(odiv,null).background); getComputedStyle("element", "pseudo-class") is the style that was obtained after the calculation. The second parameter is the pseudo-class. If null is not used directly However, the evil IE8 and the previous ones did not support it, so the following method is needed. //console.log(currentStyle.background) This is only supported by IE itself. It also obtains the calculated style console(window.getComputedStyle?getComputedStyle(odiv,null).background:odiv.currentStyle); //Cross-browser compatibility</script> </body></html>【External link style acquisition】
<html> <head> <link rel="stylesheet" type="text/css" href="basic.css" /> //Outline link style sheet</head> <body> <div id="div1" >Test</div> <script> var sheet=document.styleSheets[0] //Get external link style sheet var rule=sheet.cssRules[0] //Get the first style console.log(rule.style.background) //red This way you can get the style specified in the external link style sheet</script> </body></html>
【Outer link style sheet】
.div2{ background:red;}The simple way to obtain css interline styles, inline styles and external link styles in the above article is the entire content that the editor has shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.