javascript - 이란 - 자바스크립트 배경색 바꾸기




JavaScript를 사용하여 HTML의 CSS 배경색을 설정하는 방법 (11)

JavaScript를 사용하여 HTML 요소의 CSS 배경색을 설정하는 방법


HTMLElement CSS 변경

JavaScript로 대부분의 CSS 속성을 변경할 수 있습니다. 다음 명령문을 사용하십시오.

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

여기서 <selector> , <property> , <new style> 은 모두 String 객체입니다.

일반적으로 스타일 속성의 이름은 CSS에 사용 된 실제 이름과 동일합니다. 그러나 둘 이상의 단어가있을 때마다 낙타 경우가됩니다. 예를 들어 background-colorbackground-color 변경됩니다.

다음 문장은 #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 class="box"></div>

여러 HTMLElement CSS 변경

예를 들어 클래스 이름 box lightgreen 인 모든 요소의 배경색을 만드는 것과 같이 둘 이상의 요소에 CSS 스타일을 적용한다고 가정합니다. 그럼 당신은 할 수 있습니다 :

  1. .querySelectorAll 하여 요소를 선택하고 파괴 구문을 사용하여 객체 Array 에서 요소의 .querySelectorAll 을 해제하십시오.

    const elements = [...document.querySelectorAll('.box')]
  2. .forEach 를 사용하여 배열을 .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 class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

다른 방법

요소의 여러 스타일 속성을 두 번 이상 변경하려면 다른 방법을 사용하는 것이 좋습니다.이 요소를 다른 클래스에 대신 연결하십시오.

CSS에서 스타일을 미리 준비 할 수 있다고 가정하면 요소의 classList 에 액세스하고 toggle 함수를 호출하여 클래스를 토글 할 수 있습니다.

document.querySelector('.box').classList.toggle('orange')
.box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}
<div class='box'></div>

JavaScript의 CSS 속성 목록

전체 목록은 다음과 같습니다.

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

CSS에 모든 스타일 등을 유지하고 JavaScript에서 클래스 이름을 설정 / 설정 해제하면 코드를 유지 관리하기가 더 쉽다는 것을 알 수 있습니다.

CSS는 분명히 다음과 같습니다.

.highlight {
    background:#ff00aa;
}

그런 다음 JavaScript에서

element.className = element.className === 'highlight' ? '' : 'highlight';

당신은 이것을 시도 할 수 있습니다

var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";

예.

var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff

JSFIDDLE


당신이 사용할 수있는

$('#elementID').css('background-color', '#C0C0C0');

또는 작은 jQuery를 사용하십시오.

$('#fieldID').css('background-color', '#FF6600');

이 스크립트 요소를 본문 요소에 추가하십시오.

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>

키스 답변 :

document.getElementById('element').style.background = '#DD00DD';

일반적으로 CSS 속성은 대시없이 camelCase로 만들어 JavaScript로 변환됩니다. 따라서 background-colorbackgroundColorbackgroundColor .

function setColor(element, color)
{
    element.style.backgroundColor = color;
}

// where el is the concerned element
var el = document.getElementById('elementId');
setColor(el, 'green');

var element = document.getElementById('element');
element.style.background = '#FF00AA';

$(".class")[0].style.background = "blue";

$('#ID / .Class').css('background-color', '#FF6600');

jquery를 사용하여 요소의 클래스 또는 ID를 대상으로 CSS 배경 또는 다른 스타일을 적용 할 수 있습니다







background-color