本文目录一览：
js 写CSs样式
JavaScript访问修改样式表,可以方便的动态修改页面:
一、访问元素中style属性的CSS样式
这个可以直接使用style对象方便的访问，例如：
div id = "mdiv" style="background-color:blue;"..../div
访问CSS的方法是:
script type="text/javascript"
//获得元素
var oDiv = document.getElementyId("mdiv");
//访问元素的style对象,再访问对象中的属性,也可以修改属性的值,直接为他赋值
alert(oDiv.style.backgroundColor);
/script
二、访问外部定义的CSS样式（类定义的CSS样式）
这个没法使用上面的方法去访问，因为CSS数据不是存储在style属性中，它是存储在类中的。
访问方法：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用CSS规则（注意：Mozilla和Safasi中是 cssRules，而IE中式rules）。
例如：
style
/*第一条规则*/
div.ss{
background-color:red;
width:101px;
}
/*第二条规则*/
a.btn2{
background:url(imag/2-AccessCtl.jpg);
}
/style
访问CSS:
var ocssRules = document.styleSheets[0].cssRules||document.styleSheets[0].rules;
//访问第一条规则
alert(ocssRules[0].style.backgroundColor);
//设置值
ocssRules[0].style.width = "992px";
//访问第二条规则
alert(ocssRules[1].style.background);
//设置值
ocssRules[0].style.background = "url(imag/3-back.jpg);";
以上内容是百度出来的
css在js里面怎么连写
要在JS中修改样式，可以这样：
var dom = document.getElementById('abc');
dom.style.padding = '8px'; //必须提供字符串，数字+单位，不能直接写数字
dom.style.margin = '0 auto';
dom.style.backgroundColor = '#0F0'; //CSS属性中的background-color之类有连字符的，去掉连字符，采用驼峰式，首字母小写，后面所有单词首字母大写
//浏览器特有属性：
dom.style.webkitAppearance = 'button'; //对应-webkit-appearance属性
js实现单一html页面两套css切换代码
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：
第一步：在连接样式表的元素里定义一个id,例如
复制代码
代码如下:
link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”
我定义的id是css。
第二步：写一个js函数，代码如下：
复制代码
代码如下:
script
type=”text/javascript”
function
change(a){
var
css=document.getElementById(“css”);
if
(a==1)
css.setAttribute(“href”,”1.css”);
if
(a==2)
css.setAttribute(“href”,”2.css”);
}
/script
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码
代码如下:
a
href=”#”
onClick=”change(1)”1.css/a
a
href=”#”
onClick=”change(2)”2.css/a
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
方法二：
第一步：导入两套css文件
复制代码
代码如下:
link
rel="stylesheet"
type="text/css"
title="样式A"
href="css/people1.css"
/
link
rel="alternate
stylesheet"
type="text/css"
title="样式B"
href="css/people2.css"
/
第二步：写切换的js函数
复制代码
代码如下:
script
type="text/javascript"
var
title
=
"样式A";
function
setStyle(){
//只是样式A
和样式B切换
if(title=="样式A"){
title
=
"样式B";
}else{
title
=
"样式A";
}
var
i,links;
//用dom方法获取所有link元素
links
=
document.getElementsByTagName("link");
//判断每个link元素中是否含有style字符串
，用来判断此link元素为样式表link
，同时判断此link是否包含title属性
for(i=0;
links[i];
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled
=
true;
//再来判断title中是否有指定的title字符串
有则把当前的link设为可视
即激活当前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false;
//alert("ok");
}
}
}
}
/script
第三步：在html标签中调用切换的js函数
复制代码
代码如下:
a
href="#"
onclick="setStyle();"
1/a
a
href="#"
onclick="setStyle();"2/a
a
href="#"
onclick="setStyle();"3/a
a
href="#"
onclick="setStyle();"4/a
a
href="#"
onclick="setStyle();"5/a
如何在JS中定义CSS
var domObj = document.getElementById("tagId");
//使用domObj.style来设置css：
domObj.style.backgroundColor="#000";//对应style里 background-color
domObj.style.fontSize="#000";//对应style里 font-size
//如果对这个表不太清楚可以在w3c上查一下
//但是一般有个规律就是，首单词小写 “-”后面的第一个字母大写，如：font-size 就是fontSize
如果是想更换标签的class的话，可以使用
domObj.className = "other_class";
