style设置/获取样式的问题：
1.js通过style方法
--加样式：加的是行间样式 oDiv.style.width="20"+'px';
--取样式：取得是行间样式 alert(oDiv.style.width)
--当css写在样式表里(即css全部写在行外)的时候获取不到 --alert(oDiv.style.width)是错误的
行内样式的优先级最高,当js通过style方法添加了样式之后,
js再通过修改class的值为同一元素增加样式,最终行内样式优先起作用,
在写js时最好统一只操作style或者class,不要同时操作
2.如何获取元素的行外样式:(样式全写在style标签里，或者一个.css 文件里)
获取行外样式：
IE: currentStyle
Chrome,FF: getComputedStyle(oDiv,false).width
兼容两个浏览器的写法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解决很多兼容性写法时,都是用if..else..
封装一个获取行外样式的函数:
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
调用：getStyle(oDiv,'width');
对于样式可分为：
单一样式:width,height,font-size等
复合样式：background,border
而currentStyle只能取单一样式,无法取复合样式
要想取：getStyle(oDiv,'backgroundColor');
3.通过js如何为元素修改class属性值/添加class属性
js中任何标签的任何属性都可以修改,修改时HTML里面怎么写js里面就怎么写,
document.getElementbyId('#box').style.background="red";
document.getElementbyId('#box').href="demo.css";
但是有一个例外,就是不可以这样修改class属性
修改时应该为document.getElementbyId('box').className='bigBox';
这样就为id为box的元素，添加了一个名为bigBox的class属性。
因为class为html 里面的关键字/保留字,不可以修改,
(所有的关键字/保留字都不可以修改)
4.js中两种操作属性的方法:
1)oTxt.value="111111"
2)oTxt['value']='1111'
在所有操作属性的方法中,第一种方法都可以用第二种方法代替,但是第一种方法比较方便
但元素属性作为函数的参数来传参时,操作属性只能用第二种方法,用第一种会有错误
function change(name,val){
var oDiv=document.getElementbyId('div');
oDiv['style'][name]=value;
}
<div id="div" onclick="change('background','red')"></div>
offsetWidth/offsetHeight的问题:
offset的知识点:
offsetWidth/offsetHeight/offsetLeft/offsetTop: 获取的都是盒模型尺寸
--获取元素距离'父元素'而言的距离(左边距,即获取物体的位置)
--综合考虑影响物体位置的因素(width,margin)
--使用时：只能获取,并不能设置'oDiv.offsetLeft=20px'是错误的,要通过odiv.style.left设置
offset的bug:
当使用 oDiv.style.width=oDiv.offsetwidth-4+'px' 来设置物体的样式时，最终物体的宽可能不变窄,反而会增加
应为offset获取的物体盒模型的样式,减掉之后可能比物体实际的宽要大
注**我们平时用oDiv.style.width=oDiv.offsetwidth-1+'px'
而不用oDiv.style.width=oDiv.style.width-4+'px' 是因为style只能取行间样式,
而我们平时的样式都写在外面的样式表里面,style的方法获取不到,所以用offset来获取,
但是当offset出现问题时,我们可以把样式写在样式表里面,通过
oDiv.style.width=oDiv.style.width-4+'px'来设置，但这种方法不是很好,不能实现表现层与结构层的分离,
所以我们可以通过上面封装的getStyle()函数获取行外样式，来代替offset，
var oDiv=document.getElementById('div1');
var wi=getStyle("oDiv","width");
oDiv.style.width=wi-10+'px'; //这种方法是最准确的获取和设置样式的方法
function getStyle(obj,styleName){
if(obj.currentStyle){
//IE
return obj.currentStyle[styleName];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[styleName];
}
}
注:以后用offset时最好都换成使用这个函数,才不会出问题