javascript动态改变css-优快云博客

本文介绍了一个简单的网页布局案例，通过选择器可以实现左右布局样式的切换。该案例使用了两种不同的 CSS 文件来定义元素的不同样式，同时利用 JavaScript 实现样式的选择与切换。

<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="text/html; charset=utf-8" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="left.css" type="text/css" title="left"/>
  <link rel="alternate stylesheet" href="right.css" type="text/css" title="right"/>
  <script type="text/javascript">
	function alterStylesheet(title) {
		if(!title)return;
		var _links = document.getElementsByTagName("link");
		for(var i = 0, len = _links.length; i < len; i++) {
			var a = _links[i];
			a.disabled = a.title == title ? false : true;
		}
	}
  </script>
 </head>

 <body>
	<select onchange="alterStylesheet(this.value)">
		<option value="left">left</option>
		<option value="right">right</option>
	</select>
	<img alt="图片" id="img1"/>
	<p id="content">
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
		我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
	</p>
 </body>
</html>

left.css

body img#img1 {
		display: block;
		width: 200px;
		height: 150px;
		background-color: #E0E0E0;
		border: solid 1px #3377cc;
		float: left;
		margin-right: 12px;
		margin-bottom: 2px;
	}
	body p#content {
		font-size: 14px;
	}

right.css

body img#img1 {
        display: block;
        width: 200px;
        height: 150px;
        background-color: #E0E0E0;
        border: solid 1px #3377cc;
        float: right;
        margin-left: 12px;
        margin-bottom: 2px;
    }
    body p#content {
        font-size: 14px;
    }