当前位置: 代码迷 >> Web前端 >> 动态式样
  详细解决方案

动态式样

热度:206   发布时间:2012-10-30 16:13:36.0
动态样式

这是某种实现方式

?

<html>
	<head>
		<title></title>
		<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
		<style type="text/css" id="a">
.hello {
	background-color: pink;
}
</style>
		<style type="text/css">
.world {
	color: #33FF99
}
</style>
		<script language="javascript">
  var turnback=false;
  function setCSS()
  {
  	var ttt = document.getElementById("ttt");
  	if(turnback){
		a.styleSheet.cssText=".hello{background-color:pink;width:"+ttt.value+"px;height:"+ttt.value+"px}";
	}else{
		a.styleSheet.cssText=".hello{background-color:gray;width:"+ttt.value+"px;height:"+ttt.value+"px}";
	} turnback=!turnback;
  }
  </script>
	</head>
	<body>
		<input type="text" id="ttt">
		<button onclick="setCSS()" type="button">
			切换背景颜色
		</button>
		<div class="hello world">
			hello world
		</div>
		<div class="hello world">
			hello world
		</div>
		<div class="hello world">
			hello world
		</div>
		<div class="hello world">
			hello world
		</div>
	</body>
</html>

?

  相关解决方案