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時最好都換成使用這個函數,才不會出問題