JS控制CSS

JS   2009-07-30 15:09   阅读142   评论0

字号： 大  中  小

近排看了下JS，顺便也看了下CSS，然后突然想试一下JS控制CSS，毕竟将来可能会用到，上网查了下得到如下信息：

一赋值方式 :     用法：元素(节点).style.css属性

只不过css属性写法特殊点

一个单词的就直接写，中间用横杠的前一个开头字母小写，后一个开头字母大写，不用横杠链接

还有几个特殊，比如常见的css的float属性要写成

document.getElementById("div01").style.cssFloat;

因为float是js保留字。

其他的没是区别了

document.getElementById("div01").style.height;

document.getElementById("div01").style.lineHeight;

document.getElementById("div01").style.backgroundColor;

下面写了个深入一点的例子，自定义一个对象里面存放所需的CSS属性，然后利用这些属性设置当前节点样式：

function changeCss(){

var s={backgroundColor:"#0099FF",width:"40px"};//包含了CSS属性

var node=document.getElementById("a");获取节点

for(var c in s){

eval("node.style."+c+"=s[c]");//原本执行是这样的：node.style.proName=s[c];但由于proName（属性名）是未知的需要遍历s对象获取，所以需要使用eval函数，通过这个函数，存入的字符串可以当表达式执行，这是个很实用的方法哦！

}

}

二、利用节点的className属性改变其CSS

再有一种方式就是通过控制标签的class属性，用于更改整个CSS样式,用法：

<font id="a">aa</font>

/////////////////////////////////////////////////

<style id="css" type="text/css">

.css{

background:red;

}

</style>

////////////////////////////////////////////////////

var node=document.getElementById("a");

node.className="css";

三、获取节点相关的CSS属性值

以上方式可以说都是向CSS设置值或更改CSS，如何获取当前节点的CSS样式属性值呢？查了很久终于查到：

IE下：node.currentStyle['属性名']

hh下：document.defaultView.getComputedStyle (node,null)['属性名'];

网上一个比较方法是：

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];

}

}