无刷新变换CSS样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>无刷新变换样式表</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="jsfile/imagesa35/css1.css" rel="stylesheet" type="text/css" id="css">
</HEAD>
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","jsfile/imagesa35/css1.css");
if (a==2)
css.setAttribute("href","jsfile/imagesa35/css2.css");
if (a==3)
css.setAttribute("href","jsfile/imagesa35/css3.css");
}
</script>
<BODY>
<div id="chs">
<a href="#" onClick="change(1)">使用样式表1</a>
<a href="#" onClick="change(2)">使用样式表2</a>
<a href="#" onClick="change(3)">使用样式表3</a><br />换了样式表
</div>
</BODY>
</HTML>
相关文档:
<div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同
fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,
要解决这一个矛盾,可以利用!imp ......
JavaScript CSS Style属性对照表
文章来源:http://www.phplamp.org/2008/10/jsavscript-js-css-style/
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:
JavaScript代码
<script type="text/javascript"> & ......
1. 将网页或元素居中
HTML:
<div class="wrap">
</div><!-- end wrap -->
CSS:
.wrap { width:960px; margin:0 auto;}
......
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#FFFFFF;
margin: ......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......