转换背景色.html,如何使用javascript设置HTML的CSS背景色

更改的CSS

HTMLElement

您可以使用javascript更改大多数CSS属性,使用以下语句:

document.querySelector().style[] =

哪里

,

,

都是

String

物体。

通常,Style属性的名称与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;

}

更改多个CSS

HTML-元素

假设您希望将CSS样式应用于多个元素,例如,使用类名使所有元素的背景色

box

lightgreen

. 然后你可以:

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

循环数组

.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;

}

另一种方法

如果要多次更改元素的多个样式属性,可以考虑使用其他方法:将此元素链接到其他类。

假设您可以预先在CSS中准备样式,那么您可以通过访问

classList

并调用

toggle

功能:

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

.box {

width: 100px;

height: 100px;

}

.orange {

background: orange;

}

javascript中的css属性列表

以下是完整的列表:

alignContent

alignItems

alignSelf

animation

animationDelay

animationDirection

animationDuration

animationFillMode

animationIterationCount

animationName

animationTimingFunction

animationPlayState

background

backgroundAttachment

backgroundColor

backgroundImage

backgroundPosition

backgroundRepeat

backgroundClip

backgroundOrigin

backgroundSize

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