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

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

Добрый день. При разработке сайтов очень часто необходимо изменять свойства CSS для создания различной анимации и для придания сайту большей динамичности. Ниже я выкладываю пример подобного кода на javascript и полезную табличку.

Итак, допустим у нас есть поле input типа text, которое само по себе находится в таблице table вместе с другими элементами. Нам надо при выделении поля input закрашивать всю строчку нужным цветом. Для этого мы напишем обработчики событий onblur (Потеря фокуса) и onclick (Клик по полю). Вот работающий пример:

Столбец 1 Столбец 2
Столбец 1 Столбец 2
Столбец 1 Столбец 2

А вот его исходный код:

  <table>
     <tr id="str_1">
         <td width="33%">
            Столбец 1
         </td>
         <td width="33%">
           Столбец 2
         </td>
         <td width="33%">
              <input onblur="document.getElementById('str_1').style.backgroundColor = ''" onclick="document.getElementById('str_1').style.backgroundColor = 'yellow'" type="text" value="1" size="10">
         </td>
     </tr>
     <tr id="str_2">
         <td width="33%">
            Столбец 1
         </td>
         <td width="33%">
           Столбец 2
         </td>
         <td width="33%">
              <input onblur="document.getElementById('str_2').style.backgroundColor = ''" onclick="document.getElementById('str_2').style.backgroundColor = 'yellow'" type="text" value="1" size="10">
         </td>
     </tr>
     <tr id="str_3">
         <td width="33%">
            Столбец 1
         </td>
         <td width="33%">
           Столбец 2
         </td>
         <td width="33%">
              <input onblur="document.getElementById('str_3').style.backgroundColor = ''" onclick="document.getElementById('str_3').style.backgroundColor = 'yellow'" type="text" value="1" size="10">
         </td>
     </tr>
  </table>

С помощью document.getElementById(‘*Ай ди элемента*’) мы обращаемся к нужному нам объекту, а с помощью document.getElementById(‘*Ай ди элемента*’).style.backgroundColor мы задаем конкретное свойство (backgroundColor) этого объекта.

Соответственно наши действия не ограничены только цветом фона. С помощью javascript мы можем изменять положение блоков (div), цвета шрифтов, применять очень большое количество приёмов оформления. Ниже я выкладываю таблицу соответствия стилей из CSS и их аналогов в javascript.

Таблица CSS свойств и их Javascript аналогов:

CSS свойство JavaScript аналог
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderbottom
border-bottom-color borderbottomColor
border-bottom-style borderbottomStyle
border-bottom-width borderbottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginbottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingbottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pagebreakAfter
page-break-before pagebreakbefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationblink
text-decoration: line-through textDecorationLineThrough
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex
Похожие посты:
  • Перетаскиваемые элементы на javascript (Drag & Drop)
  • Анимация при добавлении товара в корзину
  • Напоминание пользователю о появлении товара (Битрикс)
  • 2 комментария: Изменить CSS свойство с помощью Javascript

    1. GerydomeCartoon

      Кдёва,Спасибо С:

    2. Мирослав

      Спасибо, нашел именно то, что нужно

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

    Подтвердите, что Вы не бот — выберите человечка с поднятой рукой: