Как присвоить классы в скрипте?
 

Здравствуйте.

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();
    }
});

Ubivectel,

result = "<span class='day'>" +this.days[dayNo] + ". " + day + " " + this.months[month] + ". " + year + "</span> - <span class='time'>" + hour + ":" + minute + "</span>";

Спасибо рони, все работает как надо ))

Не стал создавать новую тему, ибо вопрос очень похожий. Имеется чат, когда приходит личное сообщение, под списком юзеров появляется аватар и ник отправителя, аватар вот с таким стилем ('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

Ubivectel,
пробуйте,
заменить kide.css на

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

вместо red_privados указать нужный класс.

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

с дефолтным кодом 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');

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

Сорри, неверно написал, пока окно сообщений свернуто, style остается : "cursor: pointer; border: 1px solid white;"
И только при поступлении нового меняется на: "cursor: pointer; border: 2px solid red;"

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

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,
:victory: