Суббота , 20 Апрель 2024
Домой ← Публикации ← Изменение CSS свойств с помощью JavaScript

Изменение CSS свойств с помощью JavaScript

15 апреля 2015

Приветствую, друзья!

Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.

Изменение CSS свойств посредством JavaScript

Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:

<div id="elem">DIV</div>

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

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

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

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

font-size

Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:

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

Думаю, нет нужды объяснять, что присвоение неверных значений игронируется? smile

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

Выберите CSS-свойство и укажите корректное значение для него:

Рейтинг: 0

Автор публикации

2 070
не в сети 12 месяцев

x64 (aka andi)

Комментарии: 2893Публикации: 405Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (8 голосов, в среднем: 4,25 из 5)
Загрузка...

20 комментариев

  1. Надежда Давыдова
    16 апреля 2015 на 23:43

    Привет, х64! Статья как раз наверное в тему. Сегодня весь день мучались с установкой тизеров на новом сайте. Не отображаются они в нужном месте, а только в подвале, хоть куда влепи. Интересно, что это за конфликт получился? Получается, скрипты как-то влияют на стили о_О

    Рейтинг: 0
    • x64 (aka andi)
      17 апреля 2015 на 00:17

      Надежда, доброй ночи. Скрипты лишь выдают результат своей работы, а это может быть или html/css, или картинка, или ещё чего.
      Есть отличное дополнение для firefox, называется firebug; удобно смотреть, какие стили элемента (пере)определены smile

      Рейтинг: 0
      • Надежда Давыдова
        17 апреля 2015 на 00:39

        Да, читала и даже пыталась пользоваться. Подожду пока поддержка этих тизеров сама решит проблему ) Солидарна с Бендером: саморазрешающиеся проблемы как раз по мне ))

        А вцелом спасибо за совет. Пора мне тоже углубляться, стыдно не разбираться в элементарном.

        Грядет 21 апреля, блог еще не «мобильный»… Наверное придется ставить плагин (((

        Рейтинг: 0
        • x64 (aka andi)
          17 апреля 2015 на 00:45

          От тут согласен: если поддержка предоставляется, пусть сами и решают. Не должны же пользователи ихние баги фиксить laugh
          А что понимается под «элементарным»? Вряд ли JavaScript может так называться.
          По 21, насколько знаю, пессимизироваться будет выдача для мобильных устройств, если под них сайт не адаптирован. «Взрослая» выдача не изменится.

          Рейтинг: 0
          • Надежда Давыдова
            17 апреля 2015 на 08:56

            Под элементарным понимается корректировка стилей шаблона. В скриптах я конечно не разберусь. Раньше мне стилевые файлы казались темным лесом. Но когда «прижимает», начинаешь понимать, что к чему )

            А мой блог как раз не адаптирован ((

            Рейтинг: 0
            • x64 (aka andi)
              17 апреля 2015 на 09:03

              Когда я первый раз html увидел, тоже казалось очень сложно. А CSS — вообще набор бубликов с козябликами laugh
              Но база там действительно очень простая, нужно лишь найти слова, всё объясняющие.
              Надежда, а какое количество мобильных пользователей на твоём сайте? Может, не всё так печально? Я ж помню времена, когда веб-сайты смотрелись на телефонах с разрешением 128×128 точек, и ни о какой адаптивности не слышали, но и не жаловались.

              Рейтинг: 0
  2. Арсен
    13 января 2017 на 02:44

    Как вставить в CSS свойства переменную?

    …
    var width = 20;
    var elem = document.getElementById(‘block’);
    while(width <= 200)
    {
    element.style.width = 'width';
    width++;
    }
    …

    так как показано выше не работает(((
    Я хочу добиться того, чтобы ширина блока увеличивалась постепенно.

    Рейтинг: 1
    • x64 (aka andi)
      13 января 2017 на 09:28

      Арсен, здравствуйте.
      Используйте width без одинарных кавычек и добавьте размерность — px в данном случае, судя по всему.
      Но этот код выполнится мгновенно. JS — динамический язык, выполняется в реальном времени, поэтому попытка «затормозить» событие, написав свою версию функции delay, к хорошему не приводят: страница подвиснет, отрисовка выполнится сразу после «фриза».
      Маленький пример как это сделать.

      Рейтинг: 0
  3. Владимир
    24 февраля 2017 на 17:47

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

    А как сделать вот есть например куб, у него 6 сторон, написан сверстан на css, при нажатии на ссылку скажем #side3, хочу чтобы он повернулся и стал transform=rotatate3d(0,1,0,90deg). Ну то есть чтобы повернулся своей третьей стороной. Координаты первой стороны 1,0,0,0,0deg. И так вот на все стороны сделать свои поворотики по rotate 3d. А ну да, еще нужно чтобы после поворота ширина активной стороны увеличивалась по ширине окна т.е. width = 90%

    Рейтинг: 1
    • x64 (aka andi)
      26 февраля 2017 на 17:02

      Владимир, здравствуйте.
      Хороший вопрос. Возможно, чуть позже посмотрю, что можно сделать.

      Рейтинг: 0
      • Владимир
        26 февраля 2017 на 18:55

        Еще раз здравствуйте. В общем куб уже поворачивается, там вообще просто все было. А вот как сделать чтобы активная сторона грамотно разворачивалась и сворачивалась обратно я еще никак не решил. Код тут

        Рейтинг: 1
        • x64 (aka andi)
          27 февраля 2017 на 11:39

          Владимир, доброго дня.
          Возможно, не совсем верно понял про «активную» сторону. Нужно чтобы при клике на активную ссылку (по стороне) тоже что-то происходило?
          Как вариант, добавить переменную side. При клике на ссылке проверять, не текущая сторона сейчас, и если да, до поворачивать на величину, отличающуюся на 360 градусов.

          var side = 1;
$('.link1').click(function() {
  if (1 == side) {
    $('.cube').css('transform', 'rotate3d(0,1,0,360deg)');
  } else {
    $('.cube').css('transform', 'rotate3d(0,1,0,0deg)');
  }
  side = side > 0 ? 0 : 1;
});
          Рейтинг: 0
  4. OldEv
    25 сентября 2017 на 14:47

    Небольшой костыль, но для расширения функционала стокового CSS хватает)

    HTML-файл:

    <style type="text/css" id="jscss-element"></style>

    JS-файл:

    const jscss = {
    jscssObject:{
    },
    parseObjectToCss:()=>{
        var genCss = "";
        for(selector in jscss.jscssObject){
            genCss += selector + "{";
            for(property in jscss.jscssObject[selector]){
                genCss += "    " + property + ": " + jscss.jscssObject[selector][property] + ";";
            }
            genCss += "}"
        }
        return genCss;
    },
    active:()=>{
        document.getElementById("jscss-element").innerText = jscss.parseObjectToCss();
    },
    addProperties:(selector,props,update = false) => { //props - is object with values {prop:value}
        jscss.jscssObject[selector] = {};
        for(prop in props){
            jscss.jscssObject[selector][prop] = props[prop];
        // jscss.addProperties("body",{"display":"none"},true)
        if(update)jscss.active();
    },
}
    Рейтинг: 0
  5. Hrust
    21 января 2018 на 08:17

    А как с байДом сделать так, чтобы на оба ид применилось исчезновение?

    К примеру есть два спана с одинаковым ид, но исчезает только один. Оно и понятно, ид как идентификатор для одного. И тогда есть getElementByclass, но при замене id=»saved» на class=saved, и var saved = document.getElementById(‘saved’); на var saved = document.getElementByClassName(‘saved’); ничего не происходит (не работает). А мне вот интересно, чтобы эффект применялся к обоим.

    WAR1
    WAR2

    
  var saved = document.getElementById('saved');
  
  var color = 0
  function fn(){
    saved.style.color = 'rgb('+255+','+color+','+color+')'
    color += 20
    if(color < 255) setTimeout(fn, 100)
    else {saved.style.color = 'rgb(255,255,255)';return;}
  }
    Рейтинг: 1
    • x64 (aka andi)
      21 января 2018 на 12:12

      Здравствуйте.
      Не корректно двум элементам назначать одинаковый id. На то он и идентификатор, чтобы быть уникальным. Для подобных случаев крайне желательно использовать классы. Но если очень хочется, надо использовать выборку по селекторам: querySelectorAll(). Метод вернёт массив элементов, после чего останется пробежать по каждому и изменить.
      Пример. Не особо хороший с точки зрения исполнения, но вполне наглядный.

      Рейтинг: 0

Оставить комментарий

©2009 Права на тексты и скрипты принадлежат автору блога (если явно не указанно другое)
Использование материалов допускается только с прямой индексируемой кликабельной ссылкой на статью.

Заполняя и отправляя формы Вы соглашаетесь с договором публичной оферты!

Политика конфиденциальности

Наш сайт использует файлы cookies, чтобы улучшить работу и повысить эффективность сайта. Продолжая работу с сайтом, вы соглашаетесь с использованием нами cookies и политикой конфиденциальности.

Принять