JS 2009-07-30 15:09 閱讀142 評(píng)論0
字號(hào)：
大 中 小
近排看了下JS，順便也看了下CSS，然后突然想試一下JS控制CSS，畢竟將來(lái)可能會(huì)用到，上網(wǎng)查了下得到如下信息：
一賦值方式 : 用法：元素(節(jié)點(diǎn)).style.css屬性
只不過(guò)css屬性寫(xiě)法特殊點(diǎn)
一個(gè)單詞的就直接寫(xiě)，中間用橫杠的前一個(gè)開(kāi)頭字母小寫(xiě)，后一個(gè)開(kāi)頭字母大寫(xiě)，不用橫杠鏈接
還有幾個(gè)特殊，比如常見(jiàn)的css的float屬性要寫(xiě)成
document.getElementById("div01").style.cssFloat;
因?yàn)閒loat是js保留字。
其他的沒(méi)是區(qū)別了
document.getElementById("div01").style.height;
document.getElementById("div01").style.lineHeight;
document.getElementById("div01").style.backgroundColor;
下面寫(xiě)了個(gè)深入一點(diǎn)的例子，自定義一個(gè)對(duì)象里面存放所需的CSS屬性，然后利用這些屬性設(shè)置當(dāng)前節(jié)點(diǎn)樣式：
function changeCss(){
var s={backgroundColor:"#0099FF",width:"40px"};//包含了CSS屬性
var node=document.getElementById("a");獲取節(jié)點(diǎn)
for(var c in s){
eval("node.style."+c+"=s[c]");//原本執(zhí)行是這樣的：node.style.proName=s[c];但由于proName（屬性名）是未知的需要遍歷s對(duì)象獲取，所以需要使用eval函數(shù)，通過(guò)這個(gè)函數(shù)，存入的字符串可以當(dāng)表達(dá)式執(zhí)行，這是個(gè)很實(shí)用的方法哦！
}
}
二、利用節(jié)點(diǎn)的className屬性改變其CSS
再有一種方式就是通過(guò)控制標(biāo)簽的class屬性，用于更改整個(gè)CSS樣式,用法：
<font id="a">aa</font>
/////////////////////////////////////////////////
<style id="css" type="text/css">
.css{
background:red;
}
</style>
////////////////////////////////////////////////////
var node=document.getElementById("a");
node.className="css";
三、獲取節(jié)點(diǎn)相關(guān)的CSS屬性值
以上方式可以說(shuō)都是向CSS設(shè)置值或更改CSS，如何獲取當(dāng)前節(jié)點(diǎn)的CSS樣式屬性值呢？查了很久終于查到：
IE下：node.currentStyle['屬性名']
hh下：document.defaultView.getComputedStyle (node,null)['屬性名'];
網(wǎng)上一個(gè)比較方法是：
function GetCurrentStyle (obj, prop) {
if(obj.currentStyle){
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, "-$1");
propprop = prop.toLowerCase ();
return document.defaultView.getComputedStyle (obj,null)[prop];
}
}
