Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2020, 14:17
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Как присвоить классы в скрипте?
Здравствуйте.

JS не владею, но жизнь принуждает к добровольным действиям, итак, есть скрипт выводящий на сайте время и дату. Очень хочется присвоить времени и дате отдельные классы, что бы стилизовать в css. Не подскажите как это сделать? Вот сам скрипт:

(function (global) {
    "use strict";
    function Clock(el) {
        var document = global.document;
        this.el = document.getElementById(el);
        this.months = ['Янв', 'Фев', 'Марта', 'Апр', 'Мая', 'Июня', 'Июля', 'Августа', 'Сент', 'Окт', 'Нояб', 'Дек'];
        this.days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
    }
    Clock.prototype.addZero = function (i) {
        if (i < 10) {
            i = "0" + i;
            return i;
        }
        return i;
    };
    Clock.prototype.updateClock = function () {
        var now, year, month, dayNo, day, hour, minute, second, result, self;
        now = new global.Date();
        year = now.getFullYear();
        month = now.getMonth();
        dayNo = now.getDay();
        day = now.getDate();
        hour = this.addZero(now.getHours());
        minute = this.addZero(now.getMinutes());
        second = this.addZero(now.getSeconds());
        result = this.days[dayNo] + ". " + day + " " + this.months[month] + ". " + year + " - " + hour + ":" + minute;
        self = this;
        self.el.innerHTML = result;
        global.setTimeout(function () {
            self.updateClock();
        }, 1000);
    };
    global.Clock = Clock;
}(window));

function addEvent(elm, evType, fn, useCapture) {
    "use strict";
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
    } else if (elm.attachEvent) {
        elm.attachEvent('on' + evType, fn);
    } else {
        elm['on' + evType] = fn;
    }
}

addEvent(window, "load", function () {
    if (document.getElementById("clock")) {
        var clock = new Clock("clock");
        clock.updateClock();
    }
});
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2020, 14:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ubivectel,
result = "<span class='day'>" +this.days[dayNo] + ". " + day + " " + this.months[month] + ". " + year + "</span> - <span class='time'>" + hour + ":" + minute + "</span>";
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2020, 14:31
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Спасибо рони, все работает как надо ))
Ответить с цитированием
  #4 (permalink)  
Старый 05.12.2020, 21:34
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Не стал создавать новую тему, ибо вопрос очень похожий. Имеется чат, когда приходит личное сообщение, под списком юзеров появляется аватар и ник отправителя, аватар вот с таким стилем ('border', '2px solid red') прописанном в JS. После клика на нем открывается окно сообщений, а стиль аватара меняется на ('1px solid black'). Хотелось бы что бы стиль присваивал не JS а менял класс или айди аватара, что бы оформить его уже в css.
Вот интересующие строчки кода:

kide.privados.aviso = function(alias) {
	kide.css ('KIDE_privados_avatar_'+alias, 'border', '2px solid red');


Этого наверное недостаточно, вот ссылка на сам файл: https://noviy-kovcheg.ru/components/...ult/js/kide.js
Ответить с цитированием
  #5 (permalink)  
Старый 05.12.2020, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ubivectel,
пробуйте,
заменить kide.css на
kide.$('KIDE_privados_avatar_'+alias).classList.add('red_privados');

вместо red_privados указать нужный класс.
Ответить с цитированием
  #6 (permalink)  
Старый 09.12.2020, 18:14
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Ситуация выглядит следующим образом:

с дефолтным кодом JS в инспекторе браузера я вижу следующее:

<img alt="" onclick="kide.privados.maximizar(1,true)" style="cursor: pointer; border: 2px solid red;" id="KIDE_privados_avatar_1" class="KIDE_avatar" src="http://www.gravatar.com/avatar/d120239cc325270cf181fa50d9d69a85?s=50&amp;d=wavatar">


При клике на аватаре (он же открывает сообщение) значение атрибута style, меняется на "cursor: pointer; border: 1px solid white;"

При свернутом окне сообщений при поступлении нового стайл опять меняется на красный бордер.

когда сменил строку на

kide.$('KIDE_privados_avatar_'+alias).classList.add('red_privados');


вместо изменения стиля соответственно присваивается указанный класс, но он не исчезает при открытии сообщения, то есть постоянно сигнализирует о получении нового.
По моему задача сложнее чем мне казалось
Ответить с цитированием
  #7 (permalink)  
Старый 09.12.2020, 18:54
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Сорри, неверно написал, пока окно сообщений свернуто, style остается : "cursor: pointer; border: 1px solid white;"
И только при поступлении нового меняется на: "cursor: pointer; border: 2px solid red;"
Ответить с цитированием
  #8 (permalink)  
Старый 17.12.2020, 14:50
Профессор
Отправить личное сообщение для Ubivectel Посмотреть профиль Найти все сообщения от Ubivectel
 
Регистрация: 01.12.2020
Сообщений: 166

Вряд ли кому-то пригодится, но скрипя мозгами решил вопрос следующи образом, заменил это:

kide.css ('KIDE_privados_avatar_'+alias, 'border', '2px solid red');


На это:

kide.$('KIDE_privados_avatar_'+alias).classList.add('red_privados');



далее нашел строку меняющую стиль при прочтении сообщения:

kide.css('KIDE_privados_avatar_'+alias, 'border', '1px solid white');


И по подсказке рони вместо измения стиля, вписал удаление класса:

kide.$('KIDE_privados_avatar_'+alias).classList.remove('red_privados');


Возможно решение не идеально, но цель достигнута. Рони спасибо за "удочку"

Последний раз редактировалось Ubivectel, 17.12.2020 в 14:57.
Ответить с цитированием
  #9 (permalink)  
Старый 17.12.2020, 14:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ubivectel,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как присвоить переменной значение txt javascript? Nosok Javascript под браузер 1 01.03.2019 08:37
Как присвоить значение переменной rrrromannnn jQuery 2 28.06.2018 00:03
Как для нескольких элементов с одним id присвоить style rfhnjirf Элементы интерфейса 3 19.05.2017 10:41
Как присвоить значение полученное GET-запросом переменной? 4arizard Общие вопросы Javascript 2 20.09.2016 16:23
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29