Помощь Joomla



Как Изменить Css с Помощью Javascript

Изменение CSS свойств с помощью JavaScript  Ноябрь 25, 2016 – 09:20

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

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

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

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

font-size

  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, это подразумевает задание цвета.

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

Source: a-panov.ru

Похожие публикации:

  1. Как Создать Сайт на Javascript
  2. Вычисления с Помощью Radio Javascript
  3. Анимация Помощью Javascript
  4. Css Изменения с Помощью Javascript