通过JS改变过的属性，重新加载CSS却无法正确显示

网站设置了换皮肤的功能，主要就是重新加载一个CSS文件。
在一种css皮肤下，通过js改变了某个元素的属性，比如改变了一个div的border颜色。
然后再重新加载css试图改变这个border为加一种颜色。但是却没办法达到要求，即使重新加载了css文件，border的颜色仍然为js改变后的颜色
也就是说通过js改变后的属性，无法重新再通过css更改了。请问有什么办法解决么？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

那就不要换css文件了，把其写到js中换成调用函数，比如换成绿色的就调用green()函数，来改变css
通过js我达到了要求，但就是想不通过js来改变，看有没有什么方法？
毕竟搞个js又得等页面加载完了运行一次，还是有些影响速度吧！！
你是什么问题不知道，但我这个可以通过的
function gbztys(gl){
var css=document.getElementById("incss");
if(gl=="0"){css.setAttribute("href","css/zt0.css");}
if(gl=="1"){css.setAttribute("href","css/zt1.css");}
if(gl=="2"){css.setAttribute("href","css/zt2.css");}
if(gl=="3"){css.setAttribute("href","css/zt3.css");}
if(gl=="4"){css.setAttribute("href","css/zt4.css");}
if(gl=="5"){css.setAttribute("href","css/zt5.css");}
if(gl=="6"){css.setAttribute("href","css/zt6.css");}
}
是个，这个当然没问题。
就是说，如果页面的元素有通过JS改变后，再重新加载css
那个元素显示的属性不会变，而且还是js改变后的样式。
样式的优先级问题。估计你用JS添加样式是用的obj.style.borderColor = '#f00';这样的内联样式是比外部引用的样式优先级高的。
个人觉得下面的方法是灵活度最好的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="try.css" rel="stylesheet" />
</head>
<body>
<div id='t' class="t"></div>
<input type="button" id='b1' value="添加临时样式" /><br/>
<input type="button" id='b2' value="改换样式表" />
</body>
</html>
<script type="text/javascript">
var cssTemp = function() {
this.cssSheet = this.createSheet();
this.isIE = document.all? true : false;
}
cssTemp.prototype = {
//创建一个临时样式表
createSheet: function() {
var _head = document.getElementsByTagName('head')[0];
var _sheetTemp = document.createElement('style');
_sheetTemp.type='text/css';
_head.appendChild(_sheetTemp);
_sheetTemp = document.styleSheets;
_sheetTemp = _sheetTemp[_sheetTemp.length - 1];
return _sheetTemp;
},
//添加一个临时样式
add: function(selector, key, value, index) {
var _len = (this.isIE)? this.cssSheet.rules.length : this.cssSheet.cssRules.length;
var _index = (typeof(index) == 'undefined')? _len : (index < 0)? 0 : (index > _len)? _len : index;
if(this.isIE) {
this.cssSheet.addRule(selector, key + ":" + value, _index);
} else {
this.cssSheet.insertRule(selector + "{" + key + ":" + value + "}", _index);
}
},
//删除单个临时样式
del: function(index) {
if(this.isIE) {
this.cssSheet.removeRule(index);
} else {
this.cssSheet.deleteRule(index);
}
},
//删除所有临时样式
delAll: function() {
var _len = (this.isIE)? this.cssSheet.rules.length : this.cssSheet.cssRules.length;
for(var i = 0; i < _len; i++) {
this.del(0);
}
}
}

var s = new cssTemp();

//添加一个临时样式 .t2
var btn1 = document.getElementById('b1');
btn1.onclick = function() {
s.add('.t2', 'background-color', '#222');
var c = document.getElementById('t');
c.className = c.className + ' t2';
}

//更换页面的样式表
var btn2 = document.getElementById('b2');
btn2.onclick = function() {
s.delAll();
var c = document.getElementsByTagName('link')[0];
c.href = 'try2.css';

}
</script>
问题的原因就是6楼所说的，用js设置的样式是内联样式，优先级高于你的css文件里的样式，解决办法有两种
一：将用js改的样式，修改成改变样式名，比如你给你想给p加个红色背景，你可以用js给p一个类，如bg_red，将样式写在bg_red里。二:就是提高css文件的优先级了，可以加个!important来实现
你自己选择吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p.aa { background:#000!important;}
</style>
</head><body>
<p  class="aa" style="background:red;">fdsafds</p>
</body>
</html>