Home > Developer > Web Develop
The native JS method "Document.getelementsbyclassname" is not available in IE8 and the following browsers, so it writes a method compatible with IE.
The full page code is as follows:
Testjsgetcssclass.html
<html><head><style type="Text/css">. Test_class_div {font-size : 14 px ; border : 1 px Solid #ccc ; margin : px ; padding : 5 px ; font-weight : bold ; color : red ; Span class= "Hljs-rule" >} </style><script> /** * Print JS Object Details */ function alertobj(obj) { varDescription =""; for(varIinchobj) {varproperty = Obj[i]; Description + = i +" = "+ Property +"\ n"; } alert (description); }/** * Get CSS Style object groups by class name and tag name */ function getclassnames(classstr, TagName) { if(Document.getelementsbyclassname) {returnDocument.getelementsbyclassname (CLASSSTR)}Else{//For compatibility with IE8 and the following versions of the method varnodes = document.getElementsByTagName (tagName), ret = []; for(i =0; i < nodes.length; i++) {if(Hasclass (Nodes[i], classstr)) {Ret.push (nodes[i])}}returnRet } }/** * Determine the existence of node class * * function hasclass(tagstr, classstr) { //This regular expression is because class can have more than one, judging whether it contains vararr = TagStr.className.split (/\s+/); for(vari =0; i < arr.length; i++) {if(Arr[i] = = classstr) {return true; } }return false; }</script></head><body> <div class="Test_class_div">11111111</div> <div class="Test_class_div">22222222</div> <div class="Test_class_div">33333333</div> <script> //due to the loading order, the code that gets the object should be written after the object has been loaded var divs = getclassnames (' Test_class_div ', ' div ' ); if (null ! = divs) {alertobj (divs); //Iterate over the object and change its CSS style for ( var i = 0; i < divs.length; i++) {divs[i].style.color = "Blue"; } } </script></body></html>Operation Result:
The initial font color is red, and it is blue when modified by an object group.
Firefox
IE8:
JS and use the class name of IE to get the group of CSS objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
