用Javascript切換CSS表單（點擊）

試圖找到用一個按鈕在兩個樣式表之間切換的代碼。我試圖去適應別人的解決方案，但無濟於事（尚未）。這是我最近一次嘗試：用Javascript切換CSS表單（點擊）

設置：

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" /> 
<script type="text/javascript"> 
function toggle() { 
    var el = document.getElementById("style1"); 
    if (el.href == "resumecss.css") { 
     el.href = "resumecssinvert.css";  
    } 
    else { 
     el.href = "resumecss.css"; 
    } 
} 
</script>

呼喚：

<button type="button" onclick="toggle()">Switch</button>

其目的是在一個頁面上重複兩層之間翻轉。

在此先感謝您對這些人的幫助/知識淵博。

來源

2013-08-21 userNaN

工作的呢？ – cocco

這是我能想到的最短的解決方案（在所有的瀏覽器可能工作）：

function toggle() { 
    var a = document.getElementById("style1"); 
    a.x = 'resumecssinvert' == a.x ? 'resumecss' : 'resumecssinvert'; // short if 
    a.href = a.x + '.css'; 
}

由於JavaScript中的所有內容都是一個對象，您只需添加屬性即可。

假設你的默認CSS是「resumecss」

第一次x未設置並返回false，使「resumecssinvert」將被設置。

第二時間x已設置並返回true並切回。一切正常。

來源

2013-08-21 22:06:48 cocco

嘗試，包括他們兩個，然後切換禁用標誌

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" /> 
<link id="style2" rel="stylesheet" type="text/css" href="resumecssinvert.css" disabled="disabled"/> 
<script type="text/javascript"> 
function toggle() { 
    var el1 = document.getElementById("style1"), 
     el2 = document.getElementById("style2"); 
    if(el1.disabled == "disabled") { 
     el1.disabled = undefined; 
     el2.disabled = "disabled"; 
    } else { 
     el1.disabled = "disabled"; 
     el2.disabled = undefined; 
    } 
} 
</script>

來源

2013-08-21 21:57:13 Ascherer

你的腳本是實心的，除了href屬性是一個完整的URL，即使你使用相對路徑。下面是我使用的代碼工作：

function toggle() { 
    var el = document.getElementById("style1"); 
    if (el.href.match("resumecss.css")) { 
     el.href = "resumecssinvert.css";  
    } 
    else { 
     el.href = "resumecss.css"; 
    } 
}

見小提琴這裏：http://jsfiddle.net/jakelauer/LWJjX/

來源

2013-08-21 21:59:00 Jake

+1，但請從HTML下一次分裂的JavaScript：http://jsfiddle.net/LWJjX/3/ – Broxzier

這個與Jquery一起工作。

$('#dark-css').click(function() { 

    var isDarkCss = $("link[href='dark.css']"); 

    if (isDarkCss.length){ 
     isDarkCss.remove(); 
    }else{ 
     $('head').append('<link type="text/css" rel="stylesheet" media="all" href="dark.css">'); 
    } 
});

來源

2016-07-28 12:31:57 DavSev

用Javascript切換CSS表單（點擊）

回答

相關問題