search

Home  >  Article  >  Web Front-end  >  JS uses the getComputedStyle() method to obtain CSS attribute values_javascript tips

JS uses the getComputedStyle() method to obtain CSS attribute values_javascript tips

WBOY
WBOYOriginal
2016-05-16 16:51:401123browse

In the process of debugging web pages, js is often used to obtain the CSS style of elements. There are many methods. Now I only summarize the methods I often use as follows:

1. obj.style: This The method is that JS can only get the value written in the style attribute written in the html tag (style="..."), but cannot get the attribute defined in


JS gets CSS attribute value

< script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color) ;//Blank




2. Obj is used in IE .currentStyle method, while FF uses the getComputedStyle method

"DOM2-level style" enhances document.defaultView and provides the getComputedStyle() method. This method accepts two parameters: the element to get the calculated style from and a pseudo-element string (such as ":after"). If pseudo-element information is not required, the second parameter can be null. The getComputerStyle() method returns a CSSStyleDeclaration object that contains all calculated styles for the current element. Take the following HTML page as an example:
Copy code The code is as follows:




Computed element style</ title> <br><style> <br>#myDiv { <br>background-color:blue; <br>width:100px; <br>height:200px; <br>} <br></style> <br><body> <br><div id ="myDiv" style="background-color:red; border:1px solid black"></div> <br><script> <br> var myDiv = document.getElementById("myDiv"); <br>var computedStyle = document.defaultView.getComputedStyle(myDiv, null); <br>alert(computedStyle.backgroundColor); //"red" <br>alert(computedStyle .width); //"100px" <br>alert(computedStyle.height); //"200px" <br>alert(computedStyle.border); //In some browsers it is "1px solid black" <br></script> <br></body> <br></head> <br></html></span> <br> </div> <br>The border attribute may not Returns the actual border rule in the style sheet (Opera will return it, but other browsers will not). The reason for this difference is that different browsers interpret comprehensive properties differently, because setting this property actually involves many other properties. When setting the border, you actually set the border width, color, and style attributes of the four sides. So even though computedStyle.border does not return a value in all browsers, computedStyle.borderLeftWidth does. <br><br>It should be noted that even if some browsers support this feature, the way the value is represented may be different. For example, Firefox and Safari will return all colors converted to RGB format. Therefore, even if the getComputedStyle() method is used, it is best to test it in several browsers. <br><br>IE does not support the getComputedStyle() method, but it has a similar concept. In IE, every element with a style attribute also has a currentStyle attribute. This property is an instance of CSSStyleDeclaration and contains all calculated styles of the current element. The methods to obtain these styles are similar, as follows: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="78940" class="copybut" id="copybut78940" onclick="doCopy('code78940')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code78940"> <br><span style="font-family:Arial;font-size:14px;">var myDiv = document.getElementById("myDiv"); <br>var computedStyle = myDiv.currentStyle; <br>alert(computedStyle.backgroundColor); //"red" <br>alert(computedStyle.width); //"100px" <br>alert(computedStyle.height); //"200px" <br>alert(computedStyle .border); //undefined</span> <br> </div> <br>Same as the DOM version, IE does not return the border style because it is a comprehensive attribute. <br><br>3. A simple function I wrote when writing a test case (applicable to Chrome): <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="18461" class="copybut" id="copybut18461" onclick="doCopy('code18461')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code18461"> <br><span style="font-family:Arial;font-size:14px;">function getCSS(div){ <br>return document.defaultView .getComputedStyle(div, null); <br>//return div.currentStyle;//Not used, IE <br>}</span> <br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Three ways to detect iPhone/iPad device orientation_javascript skills" href="https://m.php.cn/faq/13294.html">Three ways to detect iPhone/iPad device orientation_javascript skills</a></span><span>Next article：<a class="dBlack" title="Three ways to detect iPhone/iPad device orientation_javascript skills" href="https://m.php.cn/faq/13296.html">Three ways to detect iPhone/iPad device orientation_javascript skills</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>