HTML
<div id="box" class=""></div>
1.利用Javascript来改变网页中div的CSS样式
//行内式
var div=document.getElementById("box");
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="red";
div.style.margin="0 auto";
//嵌入式,配合类名来改变样式,需要定义一个CSS的样式类,通过JS来得到类名
/*css样式类*/
.cssStyle{
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
}
div.className="cssStyle";
//通过cssText属性来批量设置样式,这也是个行内式
div.style.cssText="width: 300px;height: 300px;background-color: red;margin: 0 auto;";
//cssText的使用会清除之前元素含有的样式,所以你想保留之前的样式并且设置新的样式,得使用
div.style.cssText+="width: 300px;height: 300px;background-color: red;margin: 0 auto;";
//但是在IE中的最后一个分号会被删除
div.style.cssText+="width: 300px;height: 300px;background-color: red;margin: 0 auto;";//这样便能解决在IE中出现的问题了
//为了让代码更美观和调用灵活性更高,封装一个简单的方法
function setStyle(obj,value){
for(var i in value){
obj.style[i]=value[i];
}
}
setStyle(div,{width:"300px",height:"300px",backgroundColor:"red",margin:"0 auto"});//调用函数设置样式
1.利用Javascript来获取网页中div的CSS样式
//行内式,输出div宽度真实大小,只能获取行内式的CSS属性
console.log(div.style.width);
//既能获取行内式,也能获取嵌入式,返回一个数值,但是这个数值等于宽度加上border边框值(如有)的大小
console.log(div.offsetWidth);
//函数名方法既能获取行内式,也能获取嵌入式,输出div宽度真实大小,但不支持IE浏览器
console.log(getComputedStyle(div,false).width);
//IE浏览器的函数解决方法,功能与getComputedStyle相仿
console.log(div.currentStyle.width);
//为了更好的兼容各种浏览器,我们封装一个简单获取样式的函数方法
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
console.log(getStyle(div,"width"));//调用函数获取输出样式