很多人可能在調用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
]]>
?VML相當于IE里面的畫筆，能實現你所想要的圖形，而且結合腳本，可以讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5.0發布的，在我認為， VML其實是Word和HTML結合的產物。可以將Word文檔另存為HTML，其中的文本和圖片可以很容易的轉換，但如果是手繪制的圖形在以往的IE里面就無法解釋了，如果都轉換成圖形文件又不太現實。于是微軟把Word里面的圖形控件結合到IE里面，使IE也具備了繪圖功能。
????VML的全稱是Vector Markup Language(矢量可標記語言)，矢量的圖形，意味著圖形可以任意放大縮小而不損失圖形的質量，這在制作地圖上有很大用途。為了顯示它的強大，和增加你學習VML的信心，先給你看看一個VML例子:
Hello VML!
????在VML里面，標記使用的是XML擴張，需要一個namespace(命名空間)，你可以使用慣用的“v”作為命名空間，使用IE5.0到IE6.0通用的定義如下:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
????xmlns 全稱就是XML NameSpace 也就是命名空間。Behavior(行為)也是IE5.0新推出的東西，它的功能非常強大，結合樣式表，可以給任何HTML對象增加行為（新的屬性、方法、事件），而在這里，它的用處是把命名空間“v”和系統預定義的行為VML連接。這樣定義以后，你就可以使用下面的標記了，和普通的HTML標記有所區別，每個標記都增加了一個命名空間:
<v:shape></v:shape>
????和其他HTML元素一樣，VML標記里面可以定義DHTML大部分屬性和事件，比如說id,name,title,onmouseover等等。在寫法上VML比較靈活，很多屬性既可以寫在標記里面，又可以獨立出一個新的標記來表示:
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)" StrokeColor=red Path="m 0,0 l 10,10 x e"></v:shape>
等同于下面的寫法:
<v:shape id=shape1 name=shape1 onmouseover="alert(this.id)">
<v:Stroke StrokeColor=red/>
<v:Path v="m 0,0 l 10,10 x e"/>
</v:shape>
????當然不是所有的屬性都可以寫成獨立的標記，常用的比如說上面的 Stroke(按我的理解可以翻譯成線性)，Path，Shadow，Fill(填充)等，VML這樣的方式可以理解為 shape 的屬性分類，使屬性更直觀。
????Shape 對象派生出來的一些對象，更加直接的圖象，比如說 Rect(矩形)，RoundRect(圓邊的矩形)，Oval(圓)，Line(線)，PolyLine(不規則折線)，Image(圖形文件)等等，以后將對這些對象細細描述。
]]>
大多數的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屬性的元素中。這并沒有被足夠的重視，尤其是對于那些新手。
]]>
<body onload="document.getElementsByTagName('OPTION')[2].outerHTML=''">
<SELECT name="d_source" length=2>
<OPTION value=www.51js.com selected>www.51js.com</OPTION>
<OPTION value=www.ccbfu.com>www.ccbfu.com</OPTION>
<OPTION value="我會隱藏">我被隱藏了</OPTION>
</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值 隱藏其他表單項
<!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
??//<
????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>另一種隱藏table的
<script>??2
function?setChange()??3
{??4
if?(document.f.selfs.value?==?"1")??5
{??6
document.all.tb1.style.display?=?"block";??7
}??8
else??9
{?10
document.all.tb1.style.display?=?"none";?11
}?12
if?(document.f.selfs.value?==?"2")?13
{?14
document.all.tb2.style.display?=?"block";?15
}?16
else?17
{?18
document.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
????????????方式129
????????</option>30
????????<option?value="2">31
????????????方式232
????????</option>33
????</select>34
35
????<table?id='tb1'?style='DISPLAY:none'>36
????????方式1?方式1?方式137
????</table>38
39
????<table?id='tb2'?style='DISPLAY:none'>40
????????方式2?方式2?方式241
????</table>42
</form>43
]]>
上面的圖是某日本神人用 CSS3 畫的。四個瀏覽里面 Chrome 的支持度最高，不僅圓角、陰影一應俱全，甚至連眼睛都還會動 @@。Firefox 3.6 次之，除了眼睛不會動之外都和 Chrome 相當，Opera 則是少了陰影。
下面鏈 接：自已看看你現在用的瀏覽器畫出來的效果喔！
http://knb.im/css3/
]]>