css样式获取及兼容性（原生js）

---

类选择器兼容性

---

　　　　　　　　　　　　　　getbyclass()类选择器,在IE8及以下均不可用。 // 类选择器的兼容性

　　　　　　　　　　　　　　 function getbyclass(parentName,Name){ var parentName=document.getElementById(parentName); // 通过标签名通配符选择所有父容器内的元素

　　　　　　　　　　　　　　var all=parentName.getElementsByTagName("*"); console.log(all);　　// 创建一个新数组用来接收body元素中满足条件的元素集合

　　　　　　　　　　　　　　var arr=new Array; for(var i=0;i<all.length;i++){ if (all[i].className==Name){arr.push(all[i]);} } return arr; } // 选择父容器

　　　　　　　　　　　　　　id var a=getbyclass("ddd","d"); console.log(a);

---

CSS行间样式的获取（并非属性）

---

			var odiv=document.getElementById("div1");
			alert(odiv.style.height);

---

CSS内部样式及外链样式的获取

---

			var odiv=document.getElementById("div1");

			var a=odiv.currentStyle;
//			console.log(odiv.style.cssText)；

			alert(odiv.currentStyle.width);//IE浏览器		
　　　　　　　            var cssodiv=window.getComputedStyle(odiv); alert(cssodiv.width);//主流浏览器 

//                      兼容IE和主流浏览器:
			function getcssstyle(obj){
				if(window.getComputedStyle){return window.getComputedStyle(obj);}//IE9及以上支持，一下为undified
				else{return obj.currentStyle;}}//IE浏览器
						
			var odivcss=getcssstyle(odiv);
			alert(odivcss.width);

---

css样式设置

---

			oDiv.style.backgroundColor="";

			oDiv[style][backgroundColor]="";
//			方括号一般用在传参的时候（否则系统会把参数当成属性)比如:
			function(Name,red){document[name][backgroundColor]=red}

---

css属性选择器

---

　　　　　　　　　　　　　　var li=document.querySelectorAll("li");
　　　　　　　　　　　　　  var li=document.querySelector("li"); 
　　　　　　　　　　　　　　var btn=document.querySelector("input[type=button]")

 

　　

转载于:https://www.cnblogs.com/fengye06050/p/8148684.html