Поменять цвет фона — JavaScript

О том, как можно поменять цвет фона элемента, используя чистый JavaScript. В примере ниже представлена HTML страница с тремя кнопками, которые меняют собственный background, background страницы, background блочного элемента по клику на них.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Пример смены фона элементов страницы</title>
 </head>
  <script type="text/javascript">
  // Функция, которая меняет фон элементов:
  function ustanovit_fon(el, cl) {
    el.style.backgroundColor = cl;
  }
  </script>
<body>
<input type="button" id="knopka_1" value="Сменить цвет кнопки" onClick="return ustanovit_fon(this, 'rgb(255, 255, 0)');">
<input type="button" value="Сменить цвет фона страницы" onClick="document.bgColor='#E5E5E5'">
<input type="button" value="Сменить цвет фона абзаца" onClick="return ustanovit_fon(document.getElementById('raskivauchiisya_blok'), 'rgb(255, 204, 0)');">

<div id="raskivauchiisya_blok">
  <p>Lorem ipsum dolor sit amet consectetuer egestas Pellentesque facilisi Nam tincidunt. 
  Adipiscing Nulla fermentum neque orci Ut lobortis quis Curabitur semper id.</p>
</div>
</body>
</html>

Для смены цвета кнопки и блочного элемента используем конструкции document.getElementById() и element.style.backgroundColor. Для смены цвета фон веб-страницы, т.е <body> используем document.bgColor.

Поменять цвет фона - JavaScript

Опубликовано 25-02-2013 в 16:50


Комментариев к записи: 5

  1. andrew:

    С**ный *овнокодер, ты бы хоть почитал и узнал что транслитом переменные и функции набирать, это х**во.

    • Администратор:

      Ай-ай-ай грубим, хамим.
      Про транслит мне и без твоего совета известно.
      В отличие от тебя я смотрю на вещи не так однобоко (тупо со стороны программера).
      Если хочешь мерится сам понял чем, — ответь мне на 1 вопрос-задачку:
      есть у N-ого пользователя аккаунт в ISPManager на хостинге.
      Стоит ему авторизоваться, как его тут же редиректит обратно на форму входа.
      Причина такого явления, как устранить?
      Ответ я знаю, не волнуйся.

  2. RedAlert:

    И долго разбирался с этим явлением?

    • Администратор:

      Твой предшественник — студент, ты, я так понимаю тоже, школьник?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты