很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用，如使用内嵌样式，在html直接加入样式，给定外部样式文件，在外部样式文件中使用 @import

url(样式文件路径)，这些都是大家常用的，其实还有就是使用javascript进行样式的定义。

第一种：

var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

第二种简单：

document.createStyleSheet(style.css);

动态的 style 节点，使用程序生成的字符串：

var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=”body{ background-color:blue; }”;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

但是在上面只能在Firefox兼容，在IE里却不支持。

var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);

如果按照上面的话就能成功，但是很麻烦，要把字符串拆开写。

我一直在搜索着用javascript定义样式的代码，终于找到了，代码如下。

document.createStyleSheet(”javascript:’body{background-color:blue;’”);

但用上面的javascript代码唯一的缺点就是url 最大 255 个字符，长一点的就不行了，经过 SXPCrazy 提示，将代码进行修改成如下：

window.style=”body{background-color:blue;”;
document.createStyleSheet(”javascript:style”);

完美解决！！代码:

<script>
function blue(){
if(document.all){
window.style="body{background-color:blue;";
document.createStyleSheet("javascript:style");
}else{
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML="body{ background-color:blue }";
document.getElementsByTagName('HEAD').item(0).appendChild(style);
}
}
</script>

以上是完整代码！
本文关键字 javascript,网页设计,javascript调用样式,疯狂IT

大多数的CSS属性都很容易使用。常常，当您对标记语言的元素使用CSS属性时，产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性，却会有一些复杂，且只能在给定的环境下才会工作。

Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致（兼容性）上的混乱和（开发者心理上）的挫败感。但滑稽的是，一旦你真正理解了Z-index，你会发现它却是一个非常容易使用的属性，并且会为解决很多layout方面的挑战提供强有力的帮助。

在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，那些存在于已有版本的IE及Firefox浏览器中的独特问题。这篇关于Z-index属性的全透视文章将会为那些有着良好基础的开发者在使用Z-index属性时提供强大的自信心及强有力的帮助。

这是什么？

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

为了更清晰的描述Z-index是如何工作的，上面的这张图片夸大展示了层叠元素在视觉位置上的关系。

自然的层叠顺序

在一个HTML页面中，自然的层叠顺序（也就是元素在Z轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予Z-index属性。

元素的背景和边框会创建一个stacking context

引用:
具有负值的stacking contexts元素，按照出现的先后顺序排列（越靠后层级越靠上）
没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
没有被定位，浮动的元素，按照出现的先后顺序排列
内联元素，按照出现的先后顺序排列排列
被定位的元素，按照出现的先后顺序排列

Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。

当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的BOX被拿来展示，用以说明自然的层叠顺序。

上面的BOX被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的BOX在标记中位于第一位，蓝色的BOX位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。

为什么它会产生混乱？

即使Z-index并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中。

为了证明Z-index只能工作于被定位了的元素中，这里有同样的三个BOX，它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

灰色的BOX具有“9999”的Z-index值，蓝色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎逻辑的，你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定position属性。

下面是同样的三个BOX，分别都被设置了position: relative，他们的Z-index值还是按照上面那段设定。

现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的BOX覆盖在蓝色之上，蓝色的覆盖在金色之上。

语法

				

						

								
										#grey
										_box {    
								
						
						

								    
								width
								: 
								200px
								;    
						
						

								    
								height
								: 
								200px
								;    
						
						

								    
								border
								: 
								solid
								 
								1px
								 
								#ccc
								;    
						
						

								    
								background
								: 
								#ddd
								;    
						
						

								    
								position
								: 
								relative
								;    
						
						

								    
								z-index
								: 
								9999
								;    
						
						

								}    
						
						

								 
						
						

								#blue
								_box {    
						
						

								    
								width
								: 
								200px
								;    
						
						

								    
								height
								: 
								200px
								;    
						
						

								    
								border
								: 
								solid
								 
								1px
								 
								#4a7497
								;    
						
						

								    
								background
								: 
								#8daac3
								;    
						
						

								    
								position
								: 
								relative
								;    
						
						

								    
								z-index
								: 
								500
								;    
						
						

								}    
						
						

								 
						
						

								#gold
								_box {    
						
						

								    
								width
								: 
								200px
								;    
						
						

								    
								height
								: 
								200px
								;    
						
						

								    
								border
								: 
								solid
								 
								1px
								 
								#8b6125
								;    
						
						

								    
								background
								: 
								#ba945d
								;    
						
						

								    
								position
								: 
								relative
								;    
						
						

								    
								z-index
								: 
								1
								;    
						
						

								} 
						
				
		

重复一下，Z-index属性只能工作于那些被定义了position属性的元素中。这并没有被足够的重视，尤其是对于那些新手。

</SELECT>

2.隐藏所有select.
<script type=text/javascript>

function hideAllSelect()
{
var selects = document.getElementsByTagName("SELECT");
for(var i = 0 ; i<selects.length;i++)
{
selects[i].style.display = "none";
}
}
</script>

3.根据select值 隐藏其他表单项

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5  <script type="text/javascript">
 6  //<![CDATA[
 7    var s = 1;//当前显示的
 8    function switchView(v){
 9      document.getElementById('form_'+s).style.display = 'none';//隐藏上一个显示的
10      document.getElementById('form_'+v).style.display = '';//显示选择的.
11      s = v;
12    }
13  //]]>
14  </script>
15 </head>
16 <body>
17  <form action="" name="option" >
18    <select onchange="switchView(this.value)">
19      <option value="1" selected="selected">测试一</option>
20      <option value="2">测试二</option>
21    </select>
22    <div id="form_1">
23      <input type="checkbox" name="test1" id="c_1"><label for="c_1">选项一</label>
24    </div>
25    <div id="form_2" style="display:none">
26      <input type="checkbox" name="test2" id="c_2"><label for="c_2">选项二</label>
27    </div>
28    <input type="submit" value="提交!">
29  </form>
30 </body>
31</html>

 1<script> 
 2function setChange() 
 3{ 
 4if (document.f.selfs.value == "1") 
 5{ 
 6document.all.tb1.style.display = "block"; 
 7} 
 8else 
 9{ 
10document.all.tb1.style.display = "none"; 
11} 
12if (document.f.selfs.value == "2") 
13{ 
14document.all.tb2.style.display = "block"; 
15} 
16else 
17{ 
18document.all.tb2.style.display = "none"; 
19} 
20} 
21
22</script>
23<form name=f>
24
25    <select name="selfs" size="1 onchange="setChange()">
26        选择方式
27        <option value="1">
28            方式1
29        </option>
30        <option value="2">
31            方式2
32        </option>
33    </select>
34
35    <table id='tb1' style='DISPLAY:none'>
36        方式1 方式1 方式1
37    </table>
38
39    <table id='tb2' style='DISPLAY:none'>
40        方式2 方式2 方式2
41    </table>
42</form>
43