Style background color: background-color | htmlbook.ru

Как установить цвет фона CSS для HTML с помощью JavaScript

Изменение CSS

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

document.querySelector(<selector>).style[<property>] = <new style>

где <selector>, <property>, <new style>все Stringобъекты.

Обычно свойство стиля будет иметь то же имя, что и фактическое имя, используемое в CSS. Но если слов больше одного, это будет верблюжий падеж: например background-color, заменяется на backgroundColor.

Следующий оператор установит #containerкрасный цвет фона:

documentquerySelector('#container').style.background = 'red'

Вот быстрая демонстрация, меняющая цвет коробки каждые 0,5 с:

colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.  floor(Math.random()*colors.length)
  document.querySelector('.box').style.background = colors[random];
}, 500)

.box {
  width: 100px;
  height: 100px;
}

<div></div>

Изменение CSS нескольких

Представьте, что вы хотите применить стили CSS более чем к одному элементу, например, сделать цвет фона всех элементов именем класса box lightgreen. Тогда ты можешь:

1. выберите элементы с помощью .querySelectorAllи разверните их в объект Arrayс синтаксисом деструктуризации :

   const elements = [...document.querySelectorAll('.box')]

2. перебрать массив с помощью .forEachи применить изменение к каждому элементу:

   elements.forEach(element => element.style.background = 'lightgreen')

Вот демо:

const elements = [.. .document.querySelectorAll('.box')]
elements.forEach(element => element.style.background = 'lightgreen')

.box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}

<div></div>
<div></div>
<div></div>
<div></div>

Другой способ

Если вы хотите изменить несколько свойств стиля элемента более одного раза, вы можете рассмотреть возможность использования другого метода: вместо этого свяжите этот элемент с другим классом.

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, обращаясь classListк элементу и вызывая

document.querySelector('.box').classList.toggle('orange')

.box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}

<div></div>

Список свойств CSS в JavaScript

Вот полный список:

alignContent
alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource  
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex
  

Свойство background-color | CSS справочник

Определение и применение

CSS свойство background-color определяет цвет фона элемента. Фон элемента представляет из себя общий размер элемента, включающий значения padding (внутренние отступы элемента) и border (границы), но не включая значение свойства margin (внешние отступы элемента). Значение цвета допускается указывать как в шестнадцатиричной системе, так и в системах RGB, RGBA, HSL, HSLA, так и с помощью предопределенных цветов.

Обращаю Ваше внимание, что допускается указать значение цвета заднего фона с использованием универсального свойства background.

Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:

Поддержка браузерами

CSS синтаксис:

background-color: "color | transparent | initial | inherit";

JavaScript синтаксис:

object.style.backgroundColor="#00FF00"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование CSS свойства background-color </title>
<style> 
body {
background-color:CornflowerBlue;
}
h3 {
background-color:#FFFF00;
}
p {
background-color:rgb(0,255,0);
}
</style>
</head>
	<body>
		<h3>Заголовок второго уровня</h3>
		<p>Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
	</body>
</html>

В этом примере мы с использованием CSS свойства background-color указали цвет заднего фона для:

• Элемента <body> с использованием предопределенного цвета (CornflowerBlue).
• Элемента <h3> с использованием шестнадцатиричного значения цвета (#FFFF00 — желтый).
• Элемента <p> с использованием системы RGB (rgb(0,255,0) — зеленый).

Результат нашего примера:

background-color — цвет фона | CSS справочник

Поддержка браузерами

Описание

CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).

Обратите внимание, что по умолчанию фон не наследуется от родительского элемента, однако дочерние элементы, благодаря прозрачности своего фона (задано по умолчанию), будут содержать часть фона родительского элемента.

Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона. Все доступные названия цветов, их шестнадцатеричные значения и визуальное отображение оттенка вы можете посмотреть в таблице цветов.

Примечание: если добавить свойство background-color к тегу <body>, цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега <html>, то фон элемента <body> будет заполнять только область с содержимым, если оно есть.

Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.

Синтаксис

background-color: цвет|transparent|inherit;

Значения свойства

Пример

div {
border-style: solid;
border-bottom-width: thin;
}

HTML-стилей

Атрибут стиля HTML используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. Д.

Атрибут стиля HTML

Установить стиль элемента HTML можно с помощью атрибута style .

Атрибут стиля HTML имеет следующий синтаксис:

< тэг style = " property : value; ">

Свойство является свойством CSS.Значение - это значение CSS.

Вы узнаете больше о CSS позже в этом руководстве.

Цвет фона

Свойство CSS background-color определяет цвет фона. для элемента HTML.

Пример

Установите цвет фона для страницы на синий:

Это заголовок

• Используйте атрибут стиля для стилизации элементов HTML
• Используйте background-color для цвета фона
• Используйте цвет для цветов текста
• Использовать font-family для текстовых шрифтов
• Используйте размер шрифта для размера текста
• Использовать выравнивание текста для выравнивания текста

Упражнения HTML

background-color — CSS: каскадные таблицы стилей

Свойство CSS background-color устанавливает цвет фона элемента.

 
цвет фона: красный;
цвет фона: индиго;


цвет фона: # bbff00;
цвет фона: # bf0;
цвет фона: # 11ffee00;
цвет фона: # 1fe0;
цвет фона: # 11ffeeff;
цвет фона: # 1fef;


цвет фона: rgb (255, 255, 128);
цвет фона: rgba (117, 190, 218, 0,5);


цвет фона: hsl (50, 33%, 25%);
цвет фона: hsla (50, 33%, 25%, 0,75);


цвет фона: текущий цвет;
цвет фона: прозрачный;


цвет фона: наследовать;
цвет фона: начальный;
цвет фона: вернуться;
цвет фона: не задано;
  

Свойство background-color задано как одно значение > .

Значения

<цвет>

Единый цвет фона. Он отображается за любым заданным фоновым изображением , хотя цвет по-прежнему будет виден через любую прозрачность изображения.

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

Коэффициент контрастности цвета определяется путем сравнения яркости текста и значений цвета фона. Чтобы соответствовать текущим правилам доступности веб-содержимого (WCAG), требуется соотношение 4,5: 1 для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.

 <цвет> 
, где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?) 
  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |   
 

HTML

  

  Lorem ipsum dolor sit amet, consctetuer



  Lorem ipsum dolor sit amet, consctetuer



  Lorem ipsum dolor sit amet, consctetuer
  

CSS

 .exampleone {цвет фона: прозрачный; }

.exampletwo {
  цвет фона: rgb (153,102,153);
  цвет: rgb (255,255,204);
}

.examplethree {
  цвет фона: # 777799;
  цвет: #FFFFFF;
}
  

Результат

Таблицы BCD загружаются только в браузере

CSS bgcolor

Возможно, вы знакомы со старым атрибутом HTML bgcolor . Этот атрибут (устаревший в HTML 4 и прекращенный в HTML 5) позволял вам устанавливать цвет фона элементов HTML.Например, используя этот атрибут, вы можете установить цвет фона таких элементов, как элемент

Хотя нет свойства или атрибута CSS bgcolor , есть свойство CSS background-color . Свойство background-color является эквивалентом CSS старого атрибута HTML bgcolor . Фактически, свойство CSS background-color более мощное, чем атрибут HTML bgcolor .Одним из основных преимуществ свойства background-color является то, что его можно применить к любому элементу.

Пример использования

Цвет фона элемента

 Копия  
 Синий текст 
  

  styleProperty: значение;
  

 Копия  
 Синий текст на оранжевом фоне 
  

 Копия  
     

          Стиль и цвета
     

     

          текст абзаца
     
  

  
        
        
            
        
            

                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац 
                

                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац 
                

                

                     
 Раскрашивание фона элемента div 
 
                    
 Это абзац 
                

        
          

  
        
        
            
        
            

                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестигранника # FF0000 
                

                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестигранника # 00FF00 
                

                

                     
 Раскрашивание фона элемента div с использованием шестнадцатеричного цвета 
 
                    
 Цвет шестнадцатеричного кода # 0000FF 
                

        
          

  
        
        
            
        
            

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Красный 
                

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета: зеленый 
                

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета: синий 
                

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Голубой 
                

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Пурпурный 
                

                

                     
 Раскрашивание фона элемента div с использованием названия цвета 
 
                    
 Название цвета Желтый 
                

        
          

  
            
            
                
            
                

                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (255,0,0) 
                    

                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (0,255,0) 
                    

                    

                         
 Раскрашивание фона элемента div с использованием значений RGB 
 
                        
 Значения RGB rgb (0,0,255) 
                    

            
              

  
            
            
                
            
                

                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (255,0,0,0.5) 
                    

                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (0,255,0,0.5) 
                    

                    

                         
 Раскрашивание фона элемента div с использованием RGB с альфа-каналом 
 
                        
 rgba (0,0,255,0.5) 
                    

            
              

  
        
        
            
        
        

            

                 
 Раскрашивание фона элемента div с помощью HSL с альфа-каналом 
 
                
 hsla (0,100%, 50%, 0,5) 
            

        
          

  <тег>  

 

 Эта веб-страница имеет красный цвет фона! 

 

 

 Это демонстрационная веб-страница 

 

 


 Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый 
 

 

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 

  у этого текста нет цвета фона  
  этот текст имеет красный цвет фона  
  этот текст имеет зеленый цвет фона