javascript動態調用css樣式表

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript動態調用css樣式表 (1)

之前經常遇見classname、csstext之類的詞，卻不知道如何用。通常在網頁中樣式表的調用方法有四種。
第一是外鏈，即<link rel="StyleSheet" href = "/control/css/base.css">的形式；
第二是輸入樣式表；第三是在網頁頭部申明，如<head> <style type="text/css">...；
最後是直接在對象後寫樣式，即<div style = "width:80%...;">的形式。我們用指令碼調用樣式，也要從這幾方面入手。
一、通常情況下，我們可以通過改變外鏈樣式的的href的值實現網頁樣式的即時切換，也就是“改變模板風格”。這時候我們首先需要賦予需要改變的目標一個id，如
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
調用時很簡單，如<span on click="javascript:document.getElementById('css').href = 'ie.css'">點我改變樣式</span>
二、局部改變樣式，分為改變直接樣式，改變className和改變cssText三種。需要注意的是：第一，javascript對大小寫十分敏感，className不能夠把“N”寫成“n”，cssText也不能夠把“T”寫成“t”，否則無法實現效果。第二，如果改變className，則事先在樣式表中申明類，但調用時不要再跟style，像
document.getElementById('obj').style.className="..."的寫法是錯誤的！
只能寫成：document.getElementById('obj').className="..."
但是如果用cssText的話，必須加上style，正確的寫法是：
document.getElementById('obj').style.cssText="..."
改變直接樣式我就不必說了，大家記得要寫到具體樣式即可，如
document.getElementById('obj').style.backgroundColor="#003366"
對於新人往往不知道CSS具體樣式在javascript怎麼寫，而且有時候在不同瀏覽器中要求也不一樣。如float在IE中寫成styleFloat，在FIREFOX中寫成cssFloat，這就需要大家的積累了
本文來自: 指令碼之家(www.jb51.net) 詳細出處參考：http://www.jb51.net/article/5161.htm

javascript動態調用css樣式表 (2)

第一步：在串連樣式表的元素裡定義一個id,例如

我定義的id是css。

第二步：寫一個js函數，代碼如下：

這個函數的code可以放在頁面的任何地方。

第三步：為改變頁面的樣式表的串連添加一個函數的觸發事件，代碼如下：

<a href="#" onclick="change(1)">我是第一個css1</a>
<a href="#" onclick="change(2)">我是第二個css2</a>
<a href="#" onclick="change(3)">我是第三個css3</a>

該效果在IE和FF下均測試通過，相信大家看完後因該非常明了，利用這個方法我們可以讓瀏覽者自己選擇需要顯示的樣式表，比如年老者可以選擇一個字型較大的樣式表。這裡需要注意的兩點是：

在這個例子中函數名function後面的名字不能為links或者link，如果為links或者link，樣式表將不被改變，具體什麼原因我也不大清楚，可能是javascript的保留字元。
另外如果是改變整個頁面的樣式，你需要在樣式表檔案裡定義body的高度為100%

第二種方式

第一步：在串連樣式表的元素裡定義一個id,例如
<link rel="stylesheet" type="text/css" href="css1.css" id="cssid" media="screen">

第二步：寫一個js函數，代碼如下：
<script type="text/javascript">
function change1(){
document.getElementById("cssid").href="css1.css";
}
function change2() {
document.getElementById("cssid").href="css2.css";
}
function change3(){
document.getElementById("cssid").href="css3.css";
}
</script>

第三步：為改變頁面的樣式表的串連添加一個函數的觸發事件，代碼如下：
     <a href="#" onclick="change1()">我是第一個css1</a>
     <a href="#" onclick="change2()">我是第二個css2</a>
      <a href="#" onclick="change3()">我是第三個css3</a>

第三種方式：

    function loadjscssfile(filename, filetype) {
        if (filetype == "js") { //判斷檔案類型
            var fileref = document.createElement('script')//建立標籤
            fileref.setAttribute("type", "text/javascript")//定義屬性type的值為text/javascript
            fileref.setAttribute("src", filename)//檔案的地址
        }
        else if (filetype == "css") { //判斷檔案類型
            var fileref = document.createElement("link")
            fileref.setAttribute("rel", "stylesheet")
            fileref.setAttribute("type", "text/css")
            fileref.setAttribute("href", filename)
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }

//loadjscssfile("myscript.js", "js") //開啟頁面時瀏覽器動態負載檔案
loadjscssfile("css/shop.css", "css")

var rl=<%=(String)ViewState["col"]%>;

    var k = "";
    switch(rl)
    {
       case 1:
           k = "1.css";
           break;
case 2:
           k = "2.css";
           break;

}

loadjscssfile(k, "css") //開啟頁面時瀏覽器動態載入.css 檔案

    var filesadded = "" //儲存已經繫結檔案名字的陣列變數
    function checkloadjscssfile(filename, filetype) {
        if (filesadded.indexOf("[" + filename + "]") == -1) {// indexOf判斷數組裡是否有某一項
            loadjscssfile(filename, filetype)
            filesadded += "[" + filename + "]" //把檔案名稱字添加到filesadded
        }
        else
            alert("file already added!")//如果已經存在就提示
    }

</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More