Как Изменить Css с Помощью Javascript
Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):
document.getElementById('elem').style.ЦС
где ЦС — то свойство, к которому нужно обратиться или изменить.
Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background, border, display, font-size и т. п. Обратите внимание на последнее, в котором есть символ (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:
font-size
- Проверить существование переменной font-size.
- Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font.
Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:
- Если знака минус нет (margin, border, width и прочее) — записывается как есть:
// установить элементу ширину в 30 пикселей document.getElementById('elem').style.width = '30px';
- Если знак минус присутствует, то он убирается, а следующая буква переводится в верхний регистр: background-color → backgroundСolor, z-index → zIndex и т. д.:
// Сделать фон красным document.getElementById('elem').style.backgroundColor = '#FF0000';
Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.
Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.
- Попробуйте управлять этим списком.
- Сделать это совсем просто.
- Можете выбрать свойство color.
- Установите для него значение #0000dd
Source: a-panov.ru