JavaScript kullanarak HTML'nin CSS arka plan rengi nasıl ayarlanır

Yanıtlar:

155

Genel olarak, CSS özellikleri, herhangi bir tire olmadan camelCase yapılarak JavaScript'e dönüştürülür. Böylece background-colorolur backgroundColor.

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

// where el is the concerned element
var el = document.getElementById('elementId');
setColor(el, 'green');
— David Wengier
kaynak
3
Rengin kesinlikle tırnak içinde olması gerektiğini eklemek istiyorum element.style.backgroundColor = "color"; örneğin - element.style.backgroundColor = "turuncu"; mükemmel cevap
— Catto
Selenium testlerinde: ((IJavaScriptExecutor) WebDriver) .ExecuteScript ("arguments [0] .style.background = 'yellow';", webElement);
— nexoma
@Catto Bu durumda, renk fonksiyonun bir argümanıdır, dolayısıyla tırnak içinde olmamalıdır. Bununla birlikte, normalde bir renk ayarlarsanız, JS'de çift tırnak gerekli olacağı konusunda haklısınız.
— Bharat Mallapur
29

Tüm stillerinizi, vb. CSS'de tutarsanız ve JavaScript'te sınıf adlarını ayarlar / kaldırırsanız, kodunuzun daha iyi korunabileceğini görebilirsiniz.

CSS'niz açıkça şöyle bir şey olacaktır:

.highlight {
    background:#ff00aa;
}

Ardından JavaScript'te:

element.className = element.className === 'highlight' ? '' : 'highlight';
— Ian Oxley
kaynak
2
Nereye koyacağınızın çok açık olduğunu söyleyebilirim - değiştirmek istediğiniz HTML'den sonra herhangi bir yere.
— TeeJay
1
Bu çoğu durumda geçerlidir, ancak konfigürasyonda rengin (veya hangi niteliğin) tanımlandığı veya kullanıcının girdiği durumlarda geçerli değildir, olası her renk için bir CSS sınıfı oluşturamazsınız;)
— Juan Mendes
23 
var element = document.getElementById('element');
element.style.background = '#FF00AA';
— tags2k
kaynak
20

Veya biraz jQuery kullanarak:

$('#fieldID').css('background-color', '#FF6600');
— Wally Kanunsuz
kaynak
Büyük olasılıkla, OP Javascript'i istedi;)
— Lodder
7

Bu komut dosyası öğesini body öğenize ekleyin:

<body>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#AAAAAA";
  </script>
</body>
— james.garriss
kaynak
6 

var element = document.getElementById('element');

element.onclick = function() {
  element.classList.add('backGroundColor');
  
  setTimeout(function() {
    element.classList.remove('backGroundColor');
  }, 2000);
};
.backGroundColor {
    background-color: green;
}
<div id="element">Click Me</div>
Snippet'i genişlet

— Roger Causto
kaynak
4

Bunu deneyebilirsin

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

Misal.

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

JSFIDDLE

— Ajay Gupta
kaynak
1
element.style.background-colorgeçerli bir JavaScript değil. Bu nedenle CSS özellikleri CamelCase'e dönüştürülür.
— CrazyIvan1974
4

JQuery ile yapabilirsiniz: 

$(".class").css("background","yellow");
— bluelog
kaynak
3

KISS Cevap:

document.getElementById('element').style.background = '#DD00DD';
— Zardiw
kaynak
bunu sınıf için nasıl yapabiliriz?
— Vignesh Subramanian
Sınıf içindocument.getElementByClass('element').style.background = '#DD00DD';
— MD Ashik
3

Kullanabilirsiniz:

  <script type="text/javascript">
     Window.body.style.backgroundColor = "#5a5a5a";
  </script>
— Saeed
kaynak
3 
$("body").css("background","green"); //jQuery

document.body.style.backgroundColor = "green"; //javascript

o kadar çok yol var ki bence çok kolay ve basit

Plunker'da Demo

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

Jquery kullanarak, css arka planını veya diğer stilleri uygulamak için öğenin sınıfını veya kimliğini hedefleyebiliriz

— Pragadeesh mahendran
kaynak
1

kullanabilirsiniz 

$('#elementID').css('background-color', '#C0C0C0');
— hamed
kaynak
bu jquery javascript değil
— Vignesh Subramanian
jQuery @vignesh olduğunu -__- JavaScript
— Novocaine
@Novocaine jQuery JavaScript kullanılarak yazılmıştır, Evet. ama yine de jQuery kitaplığını
— eklemediğiniz
0

JavaScript:

document.getElementById("ID").style.background = "colorName"; //JS ID

document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class

jQuery:

$('#ID/.className').css("background","colorName") // One style

$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
— Mr.Pandya
kaynak
0

A'nın CSS'sini değiştirme HTMLElement

CSS özelliklerinin çoğunu JavaScript ile değiştirebilirsiniz, şu ifadeyi kullanın:

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

nerede <selector>, <property>, <new style>hepsi Stringnesneler.

Genellikle stil özelliği, CSS'de kullanılan gerçek adla aynı ada sahip olacaktır. Ancak birden fazla kelime olduğu zaman, bu deve durumu olacaktır: örneğin background-colorile değiştirilir backgroundColor.

Aşağıdaki ifade, arka planını #containerkırmızı renge ayarlayacaktır :

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

Her 0.5 saniyede bir kutunun rengini değiştiren hızlı bir demo:

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>
Snippet'i genişlet

Birden çok CSS'yi değiştirme HTMLElement

CSS stillerini birden fazla öğeye uygulamak istediğinizi düşünün, örneğin, sınıf adıyla tüm öğelerin arka plan rengini yapın box lightgreen. O zaman yapabilirsin:

  1. yıkıcı sözdizimine sahip .querySelectorAllbir nesneye Arraysahip öğeleri seçin ve bunları açın :

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

  2. ile dizi üzerinde döngü yapın .forEachve değişikliği her öğeye uygulayın:

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

İşte demo:

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>
Snippet'i genişlet

Diğer yöntem

Bir elemanın birden çok stil özelliğini değiştirmek istiyorsanız, başka bir yöntem kullanmayı düşünebilirsiniz: bunun yerine bu öğeyi başka bir sınıfa bağlayın.

CSS'de stilleri önceden hazırlayabileceğinizi varsayarsak classList, öğeye erişip toggleişlevi çağırarak sınıflar arasında geçiş yapabilirsiniz :

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

.orange {
  background: orange;
}
<div class='box'></div>
Snippet'i genişlet

JavaScript'teki CSS özelliklerinin listesi

İşte tam liste:

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
— Ivan
kaynak
0

Basit bir js bunu çözebilir:

document.getElementById("idName").style.background = "blue";
— Mehadi Hassan
kaynak
-1 
$(".class")[0].style.background = "blue";
— Jeff
kaynak
Bu soruya gereğinden fazla doğru cevap var ve bu cevap diğer cevaplardan daha iyi bir şey sunmuyor.
— Novocaine
Novocaine'in dediği gibi burada pek çok cevap var. Ancak gelecekte, kodunuzun ne yaptığı ve sorunu neden çözeceği hakkında daha fazla açıklama eklemek için lütfen gönderinizi düzenlemeyi düşünün. Çoğunlukla sadece kod içeren bir cevap (çalışıyor olsa bile) genellikle OP'nin problemlerini anlamasına yardımcı olmaz.
— SuperBiasedMan
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.