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

yeah86 2010-06-29 06:46:46

网站设置了换皮肤的功能，主要就是重新加载一个CSS文件。
在一种css皮肤下，通过js改变了某个元素的属性，比如改变了一个div的border颜色。
然后再重新加载css试图改变这个border为加一种颜色。

但是却没办法达到要求，即使重新加载了css文件，border的颜色仍然为js改变后的颜色
也就是说通过js改变后的属性，无法重新再通过css更改了。

请问有什么办法解决么？

...全文

731 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

小伙真帅 2010-06-30

打赏
举报

这个是没有办法解决吧？我也想知道。。

一般它是通过JS进行控制的，那控件是没办法改变。

zjhsd2007 2010-06-30

打赏
举报

问题的原因就是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>

yeah86 2010-06-30

打赏
举报

[Quote=引用 7 楼 danica7773 的回复:]

个人觉得下面的方法是灵活度最好的。

HTML code

<!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">
……
[/Quote]

代码不错，不过觉得有些复杂了。
具体问题可能具体解决吧！！

打字员 2010-06-29

打赏
举报

个人觉得下面的方法是灵活度最好的。



<!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>

打字员 2010-06-29

打赏
举报

样式的优先级问题。

估计你用JS添加样式是用的obj.style.borderColor = '#f00';

这样的内联样式是比外部引用的样式优先级高的。

超维电脑科技 2010-06-29

打赏
举报

放到session中就可以了

yeah86 2010-06-29

打赏
举报

[Quote=引用 3 楼 amyzcw 的回复:]

你是什么问题不知道，但我这个可以通过的JScript code

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"……
[/Quote]

是个，这个当然没问题。
就是说，如果页面的元素有通过JS改变后，再重新加载css
那个元素显示的属性不会变，而且还是js改变后的样式。

amyzcw 2010-06-29

打赏
举报

你是什么问题不知道，但我这个可以通过的



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");}

}