javascript 样式操作以及代替方案

<div id="wrap">
    
</div>

var oWrap = document.getElementById("wrap");

使用js改变css样式表

1. 外部样式表=> 不可以操作
2. 内部样式表
3. 行内样式

var oCss = document.getElementById("css");
//可以操作，但是要先手动去找出选择器的优先级，操作很麻烦，所以很少用这样的方式
oCss.innerText = "#wrap{width:50px;height:50px}";```

方法一

var oWrap = document.getElementById("wrap");
oWrap.style.width = "50px";
oWrap.style.height = "50px";
oWrap.style["background-color"] = "red";//background-color在js中-会报错
oWrap.style.backgroundColor = "red"; //可用驼峰式写法代替，-后的第一个字符大写
//-webkit-linear-gradient   => WebkitLinearGradient 

方法二

oWrap.style.width = "50px";
oWrap.style.height = "50px";
oWrap.style.backgroundColor = "red";
oWrap.style.position = "absolute";
oWrap.style.left = "100px";


oWrap.style. = "width:50px;height:50px;background-color:red;position:absolute;
				left:100px;";//可以这么写但不好
//加.cssText 
oWrap.style.cssText = 						"width:50px;height:50px;backgroundcolor:red;
position:absolute;left:100px;";

方法三

更好的代替方案

div#wrap{
    width: 100px;
    height: 100px;
    background-color: pink;
}
div#wrap.show{//把要改变的样式写好，用的时候加上show类名
    width: 50px;
    height: 50px;
    backgroundcolor: red;
	position: absolute;
    left: 100px;
}

var nClass = oWrap.className + " show";	//show前面记得加个空格
										//nClass=>new class
										//oWrap.className 获取原来有的class名 
oWrap.className = nClass;//加上类名
//合并
=> oWrap.className += " show";//只能加类名，不能减类名

方法四

classList

//HTML5标准下，DOM提供了一个新的操作class类名的API: classList

oWrap.classList.add("show");		//添加类名
oWrap.classList.remove("show");		//移除类名

//oWrap.style.float不能直接这么写，float是关键词
oWrap.style.cssFloat = "left";
oWrap.style.styleFloat = "left";