用js控制样式

最新推荐文章于 2024-03-17 21:57:30 发布

hdchangchang

最新推荐文章于 2024-03-17 21:57:30 发布

阅读量1.4k

点赞数

分类专栏：原生js css

本文链接：https://blog.csdn.net/hdchangchang/article/details/40187005

版权

原生js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

css

31 篇文章 1 订阅

订阅专栏

用js控制样式：

1、style方式：

var obj = document.getElementById("oDiv");
obj.style.border= "1px solid red";

2、cssText方式：

var obj = document.getElementById("oDiv");
obj.style.cssText= "border:1px solid red";

前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则通吃。

3、动态创建<style>方式

function addCssByStyle(cssString){  
	var doc=document;  
	var head = doc.getElementsByTagName("head")[0];
	var style = head.getElementsByTagName("style");

	if(style.length==0){
		style = doc.createElement("style");
		style.setAttribute("type", "text/css");  
	};

	if(style.styleSheet){ // IE 
		style.styleSheet.cssText += cssString; 
	} else if(document.getBoxObjectFor){ //火狐
		style.innerHTML += cssString;
	}else { // w3c 
		var cssText = doc.createTextNode(cssString); 
		style.appendChild(cssText);
	}
	doc.getElementsByTagName("head")[0].appendChild(style);
}

4、动态的导入css文件( <link>方式 )：

function addSheetFile(path){
    var s=document.createElement("link")
    s.rel = "stylesheet";
    s.type = "text/css";
    s.href = path;
    var headobj = document.getElementsByTagName('head')[0];
    headobj.appendChild(s);
}

ie中可以更简单：

var s= document.createStyleSheet ( sURL , index );

参数解析:

url:可选，规定引入css文件的url地址。

index:可选，规定在styleSheets集合中的索引位置，默认是最后一个。

5、js获取行间样式

var h = obj.style.height

6、获取计算后的样式

function getStyle(obj,attr){  
    if(obj.currentStyle){  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj,false)[attr];  
    }  
}