<div id="wrap">
</div>
var oWrap = document.getElementById("wrap");
使用js改变css样式表
- 外部样式表=> 不可以操作
- 内部样式表
- 行内样式
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";