Мой сайт: http://test.highfieldscentre.ac.uk/wordpress/Как активировать/деактивировать CSS при нажатии кнопки?
Я пытаюсь добавить функцию доступности к нему, который позволяет посетителям нажать на кнопку, чтобы «включить» и «выключить» режим высокой контрастности (т.е. черный фон с желтым текстом). У меня есть CSS для этого, но я не уверен, как это сделать, чтобы его можно было включить и выключить.
Любая помощь очень ценится!
Вы можете использовать JQuery Click function в JQuery для add a class или remove a class.
Как/где использовать jQuery? Заходит ли он в файл CSS? У меня нет опыта с этим ... –
Нет, вам нужно использовать jQuery в тегах на основе javascript, например, . Если вы нажмете на ссылки, приведенные выше, они покажут примеры html-страницы с каждой используемой функцией. – ca8msm
jQuery не требуется для чего-то простого. – EmmanuelB
Лучший подход может быть использование .toggleClass() функции JQuery, чтобы добавить класс к вашему body, как в следующем примере:
https://jsfiddle.net/Lc2z4hj3/
Здесь у нас есть элемент, который при нажатии включает и выключает класс contrast. Оттуда вы можете изменить свой CSS по мере необходимости, чтобы предоставить стандартные/высококонтрастные параметры.
Пример необходимого JQuery на скрипку и ниже:
$(function() {
$(".toggleContrast").click(function() {
$('body').toggleClass('contrast');
})
});
Это выглядит хорошо, но я все еще смущен тем, куда должен идти jQuery? Можете ли вы подробнее объяснить, как это реализовать? –
Обычно вы вставляете этот скрипт над '
Это лучше иметь только один CSS файл, чтобы достичь лучших спектаклей. Вы можете просто добавить класс в тело, например «контраст», и определить какой-то конкретный случай для элементов внутри страницы, когда класс здесь.
Тогда вы можете просто переключить класс на 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>Таким образом, с помощью LocalStorage, это помните настройки пользователя.
Как указано выше, это выполняется с помощью jQuery.
На очень упрощенном фундаментальном уровне Интернет состоит из трех «языков» - HTML, CSS и JavaScript (через некоторое время я получу jQuery!).
Все эти три имеют специальную цель на веб-странице. Представьте, что вы строите дом:
Pure JavaScript может быть утомительным, чтобы работать время от времени, требуя большого количества кода для выполнения простых задач.jQuery был изобретен, чтобы вы могли (со ссылкой на их лозунг здесь) Напишите меньше, сделайте больше. Это в основном много предварительно написанных функций JavaScript, которые вы можете импортировать на свой сайт, а затем использовать.
Я бы порекомендовал вам проверить курс jQuery по адресу Codecademy, его бесплатный, короткий, эффективный и позволит вам быстро и быстро, но, самое главное, дать вам представление о том, как решить не только эту проблему, но и многие другие, чтобы прийти как Что ж! :)
Я не уверен, что это правильный ответ, но вы можете добиться этого с помощью JQuery, используйте функцию click(), затем добавьте или удалите класс с помощью addClass() и removeClass() –
Это невозможно сделать с помощью Только CSS, и он сохраняется на разных страницах. Вы можете использовать JS для использования локального хранилища для сохранения значения, а затем применять стили соответственно при загрузке страницы, вы также можете использовать внешний язык программирования для создания файла cookie и хранения, а затем применять стили на основе этого файла cookie. –