Как изменить css через js при нажатии

I am trying to change the CSS of one element on click of another element. I've searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn't work. Can anyone tell me

I am trying to change the CSS of one element on click of another element. I’ve searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn’t work. Can anyone tell me what I missed?

<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />

function myFunction() {
    document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
}

neophyte's user avatar

neophyte

6,5202 gold badges28 silver badges43 bronze badges

asked Jan 14, 2013 at 13:26

mobi001's user avatar

5

Firstly, using on* attributes to add event handlers is a very outdated way of achieving what you want. As you’ve tagged your question with jQuery, here’s a jQuery implementation:

<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />

$('#image').click(function() {
    $('#foo').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});

A more efficient method is to put those styles into a class, and then add that class onclick, like this:

$('#image').click(function() {
  $('#foo').addClass('myClass');
});
.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />

Here’s a plain Javascript implementation of the above for those who require it:

document.querySelector('#image').addEventListener('click', () => {
  document.querySelector('#foo').classList.add('myClass');
}); 
.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />

answered Jan 14, 2013 at 13:28

Rory McCrossan's user avatar

Rory McCrossanRory McCrossan

329k38 gold badges302 silver badges333 bronze badges

5

Try this:

CSS

.style1{
    background-color:red;
    color:white;
    font-size:44px;
}

HTML

<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />

Javascript

function myFunction()
{
    document.getElementById('foo').setAttribute("class", "style1");
}

answered Jan 14, 2013 at 13:31

ATOzTOA's user avatar

ATOzTOAATOzTOA

34.1k22 gold badges95 silver badges116 bronze badges 

    <script>
        function change_css(){
            document.getElementById('result').style.cssText = 'padding:20px; background-color:#b2b2ff; color:#0c0800; border:1px solid #0c0800; font-size:22px;';
        }
    </script>

</head>

<body>
    <center>
        <div id="error"></div>
        <center>
            <div id="result"><h2> Javascript Example On click Change Css style</h2></div>
            <button onclick="change_css();">Check</button><br />
        </center>
    </center>
</body>

answered Oct 5, 2015 at 9:27

Kirandeep Singh's user avatar

1

In your code you aren’t using jquery, so, if you want to use it, yo need something like…

$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});

http://api.jquery.com/css/

Other way, if you are not using jquery, you need to do …

document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';

answered Jan 14, 2013 at 13:33

Elwi's user avatar

ElwiElwi

6875 silver badges15 bronze badges

With jquery you can do it like:

$('img').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});

this applies for all img tags you should set an id attribute for it like image and then:

$('#image').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});

answered Jan 14, 2013 at 13:29

Mustafa Shujaie's user avatar

Mustafa ShujaieMustafa Shujaie

8062 gold badges10 silver badges18 bronze badges 

<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />

JS

$('#click_me').click(function(){
  $('#foo').css({
    'background-color':'red',
    'color':'white',
    'font-size':'44px'
  });
});

answered Jan 14, 2013 at 13:29

Mihai Matei's user avatar

Mihai MateiMihai Matei

24k5 gold badges33 silver badges50 bronze badges

Try this:

$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});

answered Jan 14, 2013 at 13:29

Barry Kaye's user avatar

Barry KayeBarry Kaye

7,5726 gold badges42 silver badges64 bronze badges

This code seems to work fine (see this jsfiddle). Is your javascript defined before your body?
When the browser reads onclick="myFunction()" it has to know what myFunction is.

answered Jan 14, 2013 at 13:35

rmhartog's user avatar

rmhartogrmhartog

2,28312 silver badges19 bronze badges

Источник

Как поменять CSS свойства при нажатии кнопки без перезагрузки страницы

Автор: © web-rubik

Изменить свойства CSS при нажатии кнопки, да нет ничего проще! Приведу Вам пример с участием javascript, что позволит поменять свойства CSS без перезагрузки страницы. Для этого понадобится подключение к jquery библиотеке и написать небольшой javascript код.

Полный рабочий код, как поменять CSS свойства при нажатии кнопки без перезагрузки страницы:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Изменить свойства CSS при нажатии кнопки</title>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script>
    $(function () {
        $("#colorA").click(function () {
		    $("#content").attr({
			    style: "width:100px; height:100px; background-color:#F00; color:#00F;"
			});
		});
    });
</script>
<style>
    #content{ width:100px; height:100px; background-color:#000; text-align:center; color:#FFF; }
</style>
</head>

<body>
    <a id="colorA" type="button" style="text-decoration:none; cursor:pointer;">
        <div id="content">Нажми на меня</div>
    </a>
</body>
</html>

Как видно в вышеуказанном коде – нет ничего проще! Теперь давайте разберёмся, что тут и как тут работает.

У нас есть подключение к библиотеке jquery, блок div с индексом — id=»content» и кнопка с индексом id=»colorA». В javascript коде мы указали, что при нажатии кнопки с индексом id=»colorA» ( $(«#colorA»).click(function () { ) у нас запускается готовый метод под названием ( attr ) в указанном блоке ( $(«#content»).attr({ ). Метод attr позволяет поменять CSS свойства в указанном элементе, будь то цвет или путь к картинке.

Таким образом, мы с лёгкостью осуществили изменение CSS свойств, при нажатии кнопки и без перезагрузки страницы!
На этом у меня всё. Если есть какие-то вопросы, пишите в комментариях!

Понравилось 4

 

Скачать исходники

2 Комментарии КОТОРЫЕ прошли модерацию

Сергей

2019-02-07 21:29:12

А можно ли этим способом поменять в элементе стили по классу прописанном в CSS стилях? Буду признателен!

© web-rubik

2019-02-15 22:30:59

Не только классы, но и любой атрибут. Просто укажите вместо style клас и имя в кавычках :)
({class: «nameClass»})

←−−−  

Источник

Домой ← Публикации ← Изменение CSS свойств с помощью JavaScript

15 апреля 2015

Приветствую, друзья!

Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.

Изменение CSS свойств посредством JavaScript

Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:

<div id="elem">DIV</div>

Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):

document.getElementById('elem').style.ЦС

где ЦС — то свойство, к которому нужно обратиться или изменить.

Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background, border, display, font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:

font-size

Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:

  1. Проверить существование переменной font-size.
  2. Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font.

Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:

  1. Если знака минус нет (margin, border, width и прочее) — записывается как есть: 
    // установить элементу ширину в 30 пикселей
document.getElementById('elem').style.width = '30px';
  2. Если знак минус присутствует, то он убирается, а следующая буква переводится в верхний регистр: background-color → backgroundСolor, z-index → zIndex и т. д.: 
    // Сделать фон красным
document.getElementById('elem').style.backgroundColor = '#FF0000';

Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.

Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.

Думаю, нет нужды объяснять, что присвоение неверных значений игронируется? smile

  • Попробуйте управлять этим списком.
  • Сделать это совсем просто.
  • Можете выбрать свойство color.
  • Установите для него значение #0000dd

Выберите CSS-свойство и укажите корректное значение для него:

Автор публикации


2 070

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009

Загрузка…

Источник

Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

jQuery - Работа со стилями элемента

В jQuery работа со стилями HTML элементов осуществляется через метод css. Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.

Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

Синтаксис метода css:

// Вариант 1 (получение окончательного одного CSS свойства)
.css( propertyName )
// propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить
.css( propertyNames )
// propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.

Пример, в котором получим цвет фона непосредственно применённого к элементу #header:

var bgHeader = $('#header').css('background-color');

В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

// можно и так
var bgHeader = $('#header').css('backgroundColor');

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

// переберём все элементы .container
$('.container').each(function(index){
  // значение css-свойства display текущего элемента набора
  var display = $(this).css('display');
  // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display)
  console.log(index + '. display = '+ display);
});

Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент div выведим его ширину и высоту:

<div style="width: 100px; height: 100px; background-color: bisque;"></div>
<div style="width: 200px; height: 200px; background-color: lightseagreen;"></div>
...
<script>
  // при нажатии на элемент div
  $('div').click(function () {
    // создадим переменную, которая будет содержать результат
    var output = [];
    // получим значения сразу нескольких CSS свойств
    var cssProperties = $(this).css(['width', 'height']);
    // переберём полученные свойства
    $.each(cssProperties, function (prop, value) {
      // добавим в массив элемент, содержащий имя свойства и значения
      output.push(prop + ": " + value);
    });
    //выведем массив в качестве содержимого элемента
    $(this).html(output.join('<br>'));
  });
</script>

Как изменить или добавить стиль к элементу в jQuery

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу)
.css( propertyName, value )
// 2 вариант (установка значения стиля с помощью функции)
css( propertyName, function )
// 3 вариант (для установки несколько стилей элементу)
css( properties )
// Описание параметров:
// propertyName (тип: String) – имя CSS-свойства
// value (тип: String или Number) – значение, которое нужно установить CSS-свойству
// function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
//   Синтаксис функции:
//     Function( Integer index, String value ) => String или Number
//     В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
// properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода css, они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам .info серый цвет фона (background):

<div class="info">...</div>
<div class="info">...</div>

<script>
$('.info').css('background', 'grey');
</script>

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})

Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success:

$('.success').css({
  'color':'green',
  'font-size':'16px'
});

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -=. Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов .container на 10px:

$('.container').css({
  "padding-left": "+=10",
  "padding-right":"+=10"
});

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам .text, у которых цвет шрифта не равен чёрному, CSS свойство color, равное red.

$('.text').css('color',function(index,value){
  if (value!=='rgb(0, 0, 0)') {
    return 'red';
  }
});

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content:

$('#content img').css('width','300px');

Как удалить определённый стиль у элемента

Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.

Например, уберём у всех изображений на странице CSS свойство height:

$('img').css('height','');

Источник

Qusaze123

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

1

12.10.2019, 22:07. Показов 8672. Ответов 11

Метки jquery javascript (Все метки)

Имеется кнопка:

PHP 
1

<a class="block" href="#">Тема</a>

На неё по клику надо сделать добавление стиля к HTML

Javascript 
1

document.documentElement.classList.add("night");

При еще одном клике, стиль удаляется и переходит в исходное состояние. К этому привязать локальное сохранение стиля. Кто поможет? Спасибо

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь



0

Mr_Sergo

Эксперт JS

2033 / 1092 / 408

Регистрация: 29.04.2016

Сообщений: 2,612

12.10.2019, 23:15

2

Qusaze123,

Javascript 
1
2
3

document.querySelector('.block').addEventListener('click',function() {
    this.classList.toggle("night");
});



1

Qusaze123

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

12.10.2019, 23:26

 [ТС]

3

Mr_Sergo,
Извините, нет возможности сейчас проверить. Хотел спросить, это с LocalStorage для сохранения данных в браузере?

Добавлено через 5 минут
А это не смена цвета кнопки? Я просто хотел накладывать стиль на HTML, например night и к нему отдельно приписывать темную тему по элементам. Например,

CSS 
1
2
3

html.night body {
    background: black;
}

Добавлено через 3 минуты
Если я не туплю, а такое возможно, то у вас стиль применяется к кнопке и по нажатию на нее убирается



0

Mr_Sergo

Эксперт JS

2033 / 1092 / 408

Регистрация: 29.04.2016

Сообщений: 2,612

12.10.2019, 23:29

4

Цитата
Сообщение от Qusaze123
Посмотреть сообщение

это с LocalStorage для сохранения данных в браузере

Javascript 
1
2
3
4
5
6
7
8
9
10
11
12
13

let block = document.querySelector('.block');
 
window.addEventListener('unload',() => {
    localStorage.setItem('night', block.classList.contains('night') ? 1 : 0);
});
 
if (localStorage.getItem('night') == 1) {
    block.classList.add("night");
}
 
block.addEventListener('click',function() {
    this.classList.toggle("night");
});

Добавлено через 1 минуту

Цитата
Сообщение от Qusaze123
Посмотреть сообщение

у вас стиль применяется к кнопке и по нажатию на нее убирается

Да, а вы по-другому как-то хотели? Вы же сами спрашивали

Цитата
Сообщение от Qusaze123
Посмотреть сообщение

При еще одном клике, стиль удаляется и переходит в исходное состояние



1

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

12.10.2019, 23:33

 [ТС]

5

Так, только не к кнопке а к html, чтобы через него задавать различные цвета другим элементам. Типо такого, нажал на кнопку, на сайте задался стиль к html. Я уже прописываю в css с новым html стили для элементов сайта. В итоге получится две темы



0

Mr_Sergo

Эксперт JS

2033 / 1092 / 408

Регистрация: 29.04.2016

Сообщений: 2,612

12.10.2019, 23:40

6

Лучший ответ Сообщение было отмечено Qusaze123 как решение

Решение

Qusaze123,

Так?

Javascript 
1
2
3
4
5
6
7
8
9
10
11
12
13

let html = document.querySelector('html');
 
window.addEventListener('unload',() => {
    localStorage.setItem('night', html.classList.contains('night') ? 1 : 0);
});
 
if (localStorage.getItem('night') == 1) {
    html.classList.add("night");
}
 
document.querySelector('.block').addEventListener('click',function() {
    html.classList.toggle("night");
});



1

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

12.10.2019, 23:40

 [ТС]

7

Вот к этому html

Миниатюры

JS или Jquery смена стиля HTML по клику на кнопку с сохранением
 



0

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

12.10.2019, 23:48

 [ТС]

8

Сейчас, проверяю, 2 минутки

Добавлено через 4 минуты
Да вроде бы так, но на сайте не получается подрубить. Кнопка не реагирует. Я правильно делаю? Кинул код в JS файл на сайте, через функцион подключил скрипт



0

Эксперт JS

2033 / 1092 / 408

Регистрация: 29.04.2016

Сообщений: 2,612

12.10.2019, 23:53

9

Цитата
Сообщение от Qusaze123
Посмотреть сообщение

Я правильно делаю?

Посмотрите в архиве



0

Qusaze123

0 / 0 / 0

Регистрация: 05.10.2019

Сообщений: 30

13.10.2019, 00:06

 [ТС]

10
PHP/HTML 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!doctype html>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> 
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
 
    <?php $theme_color = sanitize_hex_color( get_theme_mod( 'pixigo_theme_color' ) ); ?>
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="<?php echo esc_html( $theme_color ); ?>">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="<?php echo esc_html( $theme_color ); ?>">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
    <?php if ( ! pixigo_is_amp() ) : ?>
        <script>document.documentElement.classList.remove("no-js");</script>
    <?php endif; ?>
 
    <?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="site">        
    <div id="header-site">
<header class="header"> 
<div class="site-branding">
 
                <?php
                if ( ! has_custom_logo() ) : // No custom logo? Show the site name.
 
                    if ( is_front_page() && is_home() ) :
                        ?>
                        <h1 class="site-title">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                                <?php bloginfo( 'name' ); ?>
                            </a>
                        </h1>
                    <?php else : ?>
                        <h4 class="site-title">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
                                <?php bloginfo( 'name' ); ?>
                            </a>
                        </h4>
                    <?php
                    endif;
 
                    $pixigo_description = get_bloginfo( 'description', 'display' );
                    if ( '' !== $pixigo_description || is_customize_preview() ) :
                        ?>
                        <p class="site-description"><?php echo esc_html( $pixigo_description ); ?></p>
                        <?php
                    endif;
 
                else :
                    the_custom_logo();
                endif;
                ?>
            </div><!-- .site-branding -->
<nav class="mobile-menu">       
    <input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
    <label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>
        <div class="mobile-menu__container">
    <ul class="mobile-menu__list">
                <li class="mobile-menu__item"><a href="https://cyannews.ru/category/news/" class="mobile-menu__link">Новости</a></li>
        <li class="mobile-menu__item"><a href="https://cyannews.ru/category/technology/" class="mobile-menu__link">Технологии</a></li>
        <li class="mobile-menu__item"><a href="https://cyannews.ru/category/articles/" class="mobile-menu__link">Статьи</a></li>
        <li class="mobile-menu__item"><a href="https://cyannews.ru/category/internet/" class="mobile-menu__link">Интернет</a></li>
                <li class="mobile-menu__item"><a href="https://cyannews.ru/category/smartphone/" class="mobile-menu__link">Смартфоны</a></li>
        <li class="mobile-menu__item"><a href="https://cyannews.ru/category/reviews/" class="mobile-menu__link">Обзоры</a></li>
                <li class="mobile-menu__item"><a href="https://cyannews.ru/category/aliexpress/" class="mobile-menu__link">AliExpress</a></li>
    </ul>
    </div>
        <div class="menu-container">
    <ul class="list">
                <li class="menu__item"><a href="https://cyannews.ru/category/news/" class="mobile-menu__link">Новости</a></li>
        <li class="menu__item"><a href="https://cyannews.ru/category/technology/" class="mobile-menu__link">Технологии</a></li>
        <li class="menu__item"><a href="https://cyannews.ru/category/articles/" class="mobile-menu__link">Статьи</a></li>
        <li class="menu__item"><a href="https://cyannews.ru/category/internet/" class="mobile-menu__link">Интернет</a></li>
                <li class="menu__item"><a href="https://cyannews.ru/category/smartphone/" class="mobile-menu__link">Смартфоны</a></li>
        <li class="menu__item"><a href="https://cyannews.ru/category/reviews/" class="mobile-menu__link">Обзоры</a></li>
                <li class="menu__item"><a href="https://cyannews.ru/category/aliexpress/" class="mobile-menu__link">AliExpress</a></li>
    </ul>
    </div>
        <link href="styles.css" rel="stylesheet" type="text/css">
        <html>
        <body>
        <a id="block-n" href="#">Тема</a>
        <script src="js/mode.js"></script>
        </body>
        </html>
</nav>
</header>
</div>
        </header><!-- #masthead -->

Кнопка в самом низу, не получается всё-равно. Извините)) Я сделал 1 вариант себе вчера через document.documentElement.classList.add(«night»); но работал он один раз по нажатию и до перезагрузки страницы

Добавлено через 2 минуты
Кнопку добавлял по типу такого:

Javascript 
1
2
3

function block {
document.documentElement.classList.add("night");
}

Примерно так, кнопка была немного другая

Добавлено через 4 минуты
Так, я натупил, у меня была непонятная кнопка. Всё работает как надо. СПАСИБО!



0

Эксперт JS

2033 / 1092 / 408

Регистрация: 29.04.2016

Сообщений: 2,612

13.10.2019, 00:32

11

Цитата
Сообщение от Qusaze123
Посмотреть сообщение

СПАСИБО!

Не за что



1
Источник

Понравилась статья? Поделить с друзьями:
  • Как изменить css через jquery
  • Как изменить dvb t на dvb t2
  • Как изменить dts на ac3
  • Как изменить dram voltage
  • Как изменить dpi экрана