Kolor tła CSS w JavaScript

130

Ogólnie, właściwości CSS są przekształcane do JavaScript poprzez ich camelCase bez kresek. Tak więc background-color staje się backgroundColor.

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

Źródło

2008-08-06 12:25:54

+2

Chciałbym dodać kolor oczywiście musi być w elemencie cytaty .style.backgroundColor = "color"; na przykład - element.style.backgroundColor = "orange"; doskonała odpowiedź – Catto

20

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

Źródło

2008-08-06 12:25:13 tags2k

19

Albo, używając trochę jQuery:

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

Źródło

2008-08-06 13:23:42

+0

Czy spadki są niższe, ponieważ odwoływałem się do jQuery? po prostu ciekawy –

+0

Najprawdopodobniej, ponieważ OP poprosił o JavaScript;) – Lodder

27

Można znaleźć kod jest bardziej linkujących jeśli zachować wszystkie style, itp CSS i tylko włączony/wyłączony nazwy klas w języku JavaScript.

Twój CSS byłoby oczywiście coś takiego:

.highlight { 
    background:#ff00aa; 
}

potem w javascript:

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

Źródło

2008-08-19 11:59:40

+0

ermm yes Javascript, ale gdzie to umieścisz? !!! niewystarczająco jasne – Led

+2

Powiedziałbym, że jest oczywiste, gdzie umieścić - wszędzie po kodzie HTML, który chcesz zmienić. – TeeJay

+1

Jest to ważne w większości przypadków, ale nie w przypadkach, gdy kolor (lub jakikolwiek atrybut) jest zdefiniowany w konfiguracji lub wprowadzony przez użytkownika, nie można utworzyć klasy CSS dla każdego możliwego koloru;) –

6

Dodaj ten element skryptu do elementu nadwozia:

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

Źródło

2011-03-03 21:20:56

2

KISS odpowiedź:

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

Źródło

2013-03-01 23:57:53 Zardiw

+0

jak możemy to zrobić dla klasa? –

+0

Dla klasy 'document.getElementByClass ('element'). Style.background = '# DD00DD';' –

2

Można użyć:

<script type="text/javascript"> 
    Window.body.style.backgroundColor = "#5a5a5a"; 
    </script>

Źródło

2014-01-05 12:51:06

2

Można to zrobić z JQuery:

$(".class").css("background","yellow");

Źródło

2014-02-10 17:13:09 bluelog

1

można użyć

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

Źródło

2014-04-11 01:34:55 hamed

+0

to jquery nie javascript –

+0

@vignesh jQuery * jest * JavaScript -__- – Novocaine

+0

@Novocaine jQuery jest napisane przy użyciu JavaScript, Tak . ale nadal $ nie będzie działać, chyba że dołączysz tę bibliotekę jQuery;) –

5

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>

Źródło

2015-04-17 16:07:45

3

Można spróbować tej

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

przykładem.

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

JSFIDDLE

Źródło

2015-09-03 12:21:03

+1

'element.style.background-color' nie jest prawidłowym kodem JavaScript. Właśnie dlatego właściwości CSS są konwertowane na CamelCase. – CrazyIvan1974

+0

Och, tak masz rację ... !! Thanks @ CrazyIvan1974 –

-1

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

Źródło

2015-11-11 08:44:51 Jeff

+0

Jest więcej niż wystarczająco poprawnych odpowiedzi na to pytanie, a ta odpowiedź nie oferuje niczego lepszego niż inne odpowiedzi. – Novocaine

+0

Jak powiedział Novocaine, jest tu mnóstwo odpowiedzi. Ale w przyszłości rozważ edycję swojego wpisu, aby dodać więcej wyjaśnień na temat tego, co robi twój kod i dlaczego to rozwiąże problem. Odpowiedź, która najczęściej zawiera kod (nawet jeśli działa) zazwyczaj nie pomoże OP zrozumieć ich problemu. – SuperBiasedMan

0

$("body").css("background","green"); //jQuery 

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

tak wiele sposobów, to nie myślę, że jest bardzo łatwy i prosty

Demo On Plunker

Źródło

2017-03-13 20:51:31

2

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

Używając jQuery możemy TA rPrzenieś klasę lub identyfikator elementu zastosować tło css lub innych stylings

Źródło

2017-06-23 09:56:47

-1

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

Źródło

2017-06-23 10:02:59

Kolor tła CSS w JavaScript

Odpowiedz

Powiązane problemy