如何在點擊按鈕時激活/取消激活CSS？

我的網站是：http://test.highfieldscentre.ac.uk/wordpress/如何在點擊按鈕時激活/取消激活CSS？

我想一個輔助功能添加到它使訪問者點擊一個按鈕「打開」和「關閉」高對比度模式（即黑色背景，黃色文字）。我有這個CSS，但我不知道如何使它可以打開和關閉。

任何幫助非常感謝！

來源

2016-07-28 Becky CP

我不確定它是否是正確的答案，但你可以用JQuery實現這一點，使用click（）函數，然後添加或刪除類與addClass（）和removeClass（） –

這不能用只是單獨使用CSS，並讓它在頁面中保持不變。您可以使用JS使用本地存儲來保存該值，然後在頁面加載時相應地應用樣式，還可以使用後端編程語言來創建cookie並將其存儲，然後基於該cookie應用樣式。 –

您可以使用jQuery中的JQuery Click function到add a class或remove a class.

來源

2016-07-28 14:43:14 ca8msm

如何/在哪裏使用jQuery？它是否進入CSS文件？我還沒有任何經驗...... –

不，你必須在基於javascript的標籤中使用jQuery，例如。如果您點擊上面提供的鏈接，他們將顯示使用每個功能的html頁面示例。 – ca8msm

對於簡單的事情，jQuery並不是必需的。 – EmmanuelB

一個更好的辦法可能是使用jQuery的.toggleClass()功能的一類附加到body如下面的例子：

https://jsfiddle.net/Lc2z4hj3/

在這裏，我們有一個元素，點擊開關contrast類。從那裏你可以根據需要修改你的CSS來提供標準/高對比度選項。

必要的jQuery的一個例子是在小提琴及以下：

$(function() { 
    $(".toggleContrast").click(function() { 
     $('body').toggleClass('contrast'); 
    }) 
});

來源

2016-07-28 14:50:23

這看起來不錯，但我仍然對jQuery需要去哪裏感到困惑？你能否詳細解釋一下如何實現這個？ –

通常，您會在代碼的''之上插入這類腳本。如果您完全不熟悉如何在您的網站上實現jQuery，我建議您開始研究jQuery教程。 StackOverflow最近實現了一個可能很有用的文檔服務：http://stackoverflow.com/documentation/jquery/211/getting-started-with-jquery#t=201607281504293072047 –

最好是隻有一個CSS文件，以達到更好的性能。您可以簡單地在body上添加一個類，比如「contrast」，並且當類在這裏時爲頁面內的元素定義一些特定的情況。

然後你可以用JS切換這個類。

var contrastSwitcher = document.querySelector('.contrast-switch'), 
 
\t body = document.querySelector('body'); 
 

 
contrastSwitcher.addEventListener('click', function(event) { 
 
    if (localStorage.getItem('contrast') !== null) { 
 
    \t localStorage.removeItem('contrast'); 
 
    body.classList.remove('contrast'); 
 
    } 
 
    else { 
 
    localStorage.setItem('contrast', true); 
 
    body.classList.add('contrast'); 
 
    } 
 
});

.btn { 
 
    background: #5d90c4; 
 
    color: #fff; 
 
    border: 0; 
 
    padding: .6em 2em; 
 
    font-size: 1.25em; 
 
    text-shadow: 0 1px 0 rgba(0,0,0,.5); 
 
    outline: 0; 
 
} 
 

 
.contrast .btn { 
 
    background: #222; 
 
    text-shadow: none; 
 
}

<button class="btn contrast-switch">Click me !</button>

這樣一來，使用本地存儲，它記住用戶的設置。

來源

2016-07-28 15:09:04 EmmanuelB

如上所述，這是使用jQuery完成的。

在一個非常簡單的基礎層面上，互聯網由三種「語言」組成 - HTML，CSS和JavaScript（我將在短時間內使用jQuery）。

所有這三個都對網頁有特殊用途。試想一下，你正在構建一個房子：

HTML將基本構建塊，基本上是牆壁和屋頂。 HTML是網站的結構。
CSS將房子的顏色，也許使用的材料，
所有的「designy」的東西。 CSS是網站的外觀。
JavaScript將是房子中的所有接線和管道，告訴燈泡在您按下開關時打開的所有東西。 JavaScript是網站的功能和交互性。

純JavaScript可能很乏味，有時需要大量的代碼才能完成簡單的任務。jQuery的發明使你可以（在此引用他們的口號）少寫點，多做點。這基本上是很多預先寫好的JavaScript函數，你可以導入到你的網站然後使用。

我建議查看jQuery課程Codecademy，其免費，簡短，有效，並會讓你真的很快，但最重要的是讓你瞭解如何解決這個問題，但不只是解決這個問題，好！ :)

來源

2016-07-28 15:09:48

如何在點擊按鈕時激活/取消激活CSS？

回答

相關問題