Функции работы с классами и стилями

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Функции работы с классами и стилями доступны до и после инициализации объекта VcorpJS, их работа зависит от готовности DOM браузера.

.addCss( stringCSS [,descriptor] )

Создаёт новый тег <style> с содержимым строки stringCSS - эта операция аналогична подключению нового CSS-файла (новые стили переписывают старые).
Можно указать произвольный числовой или текстовый дескриптор descriptor, для того, чтобы потом удалить этот стиль (тему) через функцию .removeCss( [descriptor] )
Если тег <style> с дескриптором descriptor уже существует, то он удаляется и создаётся новый - таким образом мы можем добавлять и менять темы.

Возвращается descriptor (если он не был указан, то создаётся новый числовой уникальный дескриптор) или false в случае пустой строки stringCSS.

VcorpJS.ready(
  function (e) {
    var cssAnimation = ".my_div { transition:background 0.3s ease-out 0s; } .my_div:hover { background:#ffffff; }";
    VcorpJS.addCss(cssAnimation, "myThemeDefault");
  }
);

.removeCss( [descriptor] )

Удаляет тег (стиль/тему) <style> с дескриптором descriptor и возвращает true
Если тег с дескриптором descriptor не найден, то ничего не происходит и возвращается false
Если descriptor не указан, то удаляются все созданные через функцию .addCss() теги <style> и возвращается true
Таким образом мы может отменять визуальные темы у того или иного объекта или группы объектов.

VcorpJS.removeCss("myThemeDefault");
/* VcorpJS.addCss(newDefaultCSS, "myThemeDefault"); // или так */

.gStyle( node, stringNameStyle )

Возвращает значение CSS-стиля по его имени stringNameStyle объекта node
Если node не найден или stringNameStyle не строка, то возвращается false

Название стиля можно передавать как в CSS-формате (например, "border-color"), так и в JS-формате (например, "borderColor")

Функция возвращает реальные значения стилей, которые использует браузер для отображения объекта (например, указанные в CSS),
для старых IE значение opacity возвращается от 0 до 1 (кросс-браузерное поведение).

Внимание! Могут быть возвращены как числовые, так и строковые значения (типа "20px"), или произвольные строковые значения (смотря что вернёт браузер).
Цветовые значения всегда возвращаются в виде "rgb(...)" или 6-значных цветов (типа "#333333").

alert( VcorpJS.gStyle("myObjID", "borderColor") );

.changeSC( [ node ] , [ selector ] , [ newclass ] , [ oldclass ] )

Изменение классов и/или стилей HTML-объекта node или вложенных в него объектов.

Если node не найден, то по всему документу.

selector - текстовый селектор для поиска HTML-объектов, вложенных в node, работает примерно так: object.querySelectorAll( selector );
Если selector не указан, то операция проводится над самим объектом node
Селектор составляется по правилам CSS - имена классов пишутся с точкой, идентификаторы через решётку #, допустимы каскадные перечисления классов и т.д.

newclass - строка - новый CSS-класс для найденных объектов (добавляется в свойство .className).
Или объект { имя_свойства1 : значение1, имя_свойства2 : значение2, ...} - для смены отдельных стилей объектов (стили перезаписываются напрямую).

oldclass - строка - старый CSS-класс для найденных объектов (удаляется из свойства .className).

Функция ничего не возвращает.

/* По всему документу ищутся все DIV, вложенные в элементы класса "myclass". У всех найденных DIV меняется CSS-класс со старого "theme1" на новый "theme2" */
VcorpJS.changeSC(null, ".myclass div", "theme2", "theme1" );

/* В HTML-объекте с id="myObjID" ищутся все дочерние объекты с классом "theme_red", ко всем найденным объектам применяются указанные стили */
VcorpJS.changeSC("myObjID", ".theme_red", { color: "red", display: "block", filter: "alpha(opacity=50)", opacity: 0.5 } );

/* HTML-объект myNode меняет стили на указанные, дополнительно удаляется CSS-класс "theme2" */
VcorpJS.changeSC(myNode, null, { color: "red", display: "block" }, "theme2" );

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.