如何使用javascript动态创建css的class

Question

 obj.style.backgroundColor="#000066";   
obj.style.color="#FFFFFF";   

Answer 1

不是这个意思，我的意思是创建class,不是改变样式

Answer 2

比如 document.styleSheets[0].rules[0].style.display = "inline";
是改变一个class的属性，我想问下是否有办法创建一个class

Answer 3

不能创建CLASS
可以先写好CSS的CLASS
然后document.styleSheets[0].rules[0].className = "CALSS名称";

Answer 4

一：你可以动态的写css 只有你愿意 写成<style>.red{....}</style> 然后添加到head里面
二：给你几个通用的函数 也许对你用function resetCSS(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}
function addClass(elem,name){
    elem.className=name;
}function getStyle(elem,name){//获取元素的样式
if(elem.style[name])
return elem.style[name];
else if(elem.currentStyle)
return elem.currentStyle[name];
else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,"-$1");
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}
else
return null;
}

Answer 5

呃，如果你要在别的页面也调用这个样式的话，那就有些麻烦了
如果只是在当前页面使用，那么还是可以使用js“创建”某些class
比如你可以定义一个函数，设置某个“class”的样式，然后需要调用该样式的标签，就直接调用该js函数即可

Answer 6

比如function test(obj){
obj.style.color="#FFFFFF";
}
//
var obj=document.getElementById("test");
test(obj);//调用“class”

Answer 7

<SCRIPT LANGUAGE="JavaScript">
<!--
/**
 * 动态加载CSS样式文本
 * @param {string} cssText,css样式文本块
 * @return void 
 */
function registerCss(cssText){
var style=document.createElement("style");
var head=document.getElementsByTagName("head")[0];
if(!head){
return;
};
if(document.all){
style.setAttribute("type","text/css");
style.styleSheet.cssText=cssText;
}
else{
style.appendChild(document.createTextNode(cssText));
};
if(head.firstChild){
head.insertBefore(style,head.firstChild);
}
else{
head.appendChild(style);
};
}; /**
 * 动态加载CSS样式文件
 * @param {string} cssUrl,css样式文件
 * @return void 
 */
function importCss(cssUrl){
var link=document.createElement("link");
var head=document.getElementsByTagName("head")[0];
link.setAttribute("rel","stylesheet");
link.setAttribute("href",cssUrl);
if(!head){
return;
}
if(head.firstChild){
head.insertBefore(link,head.firstChild);
}
else{
head.appendChild(link);
};
};

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
registerCss("body{font-size:20px；color:red}#divTest{color:blue}");
//importCss("http://www.yangxinming.cn/sytle.css");
importCss("/demo.css");
//-->
</SCRIPT>