Пятница , 28 Апрель 2017
Как новичку заработать в интернете?
ДомойПубликацииИзменение CSS свойств с помощью JavaScript

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

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

Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе 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

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

1 474
не в сети 1 час

x64 (aka andi)

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

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

  1. Надежда Давыдова

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

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

      Рейтинг: 0
      • Надежда Давыдова

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

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

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

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

          Рейтинг: 0
          • Надежда Давыдова

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

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

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

              Рейтинг: 0
              • Надежда Давыдова

                Мобильный трафик около 10%. Но люди просматривают и как ты говоришь, «не жалуются». Это Гуглу все не нравится, вот вчера пришло еще одно «письмо счастья». Озадачена всерьез.

                Рейтинг: 0
  2. Как вставить в CSS свойства переменную?


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

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

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

      Рейтинг: 0
  3. Здравствуйте.

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

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

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

        Рейтинг: 1
        • Владимир, доброго дня.
          Возможно, не совсем верно понял про «активную» сторону. Нужно чтобы при клике на активную ссылку (по стороне) тоже что-то происходило?
          Как вариант, добавить переменную 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

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

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля