changer d'arrière-plan en utilisant javascript

Question

Je dois changer l'arrière-plan d'un div en utilisant JavaScript. J'ai réussi à faire cela, en utilisant document.getElementById('test').style.background = "url('img/test.jpg')";

Maintenant, comment puis-je changer d'autres propriétés comme répéter, faire défiler, etc?

Le css que je veux pour le test est comme

background: #f00 url('img/test.jpg') no-repeat fixed 10px 10px; 

Je ne peux pas utiliser jQuery, car je ne veux pas inclure la bibliothèque pour seulement une petite chose.

Answer 1

Créez une classe avec ces propriétés, puis affectez/supprimez cette classe via javascript.

Answer 2

Au lieu de définir toutes les propriétés css avec javascript. Je suggère de créer une règle css supplémentaire pour cet élément avec certaine classe. Et puis utilisez javascript pour ajouter ou supprimer cette classe de cet élément lorsque vous en avez besoin.

Par exemple.

function changeBG(){ 
    var element = document.getElementById('test'); 
    element.setAttribute("class", 'newBG'); //For Most Browsers 
    element.setAttribute("className", 'newBG'); //For IE; harmless to other browsers. 
} 

Answer 3

function displayResult() 
{ 
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeat right top"; 
} 

Voir ci-dessous:
http://www.w3schools.com/jsref/prop_style_background.asp

Answer 4

Cela donnera la classe à l'élément dom

document.getElementById('test').className = 'cssName' 

Answer 5

devrait fonctionner ci-dessous:

document.getElementById('test').style.background = "#f00 url('img/test.jpg') no-repeat fixed 10px 10px" 

Vous pouvez également utiliser des propriétés individuelles telles que backgroundColor de l'objet style. Voir here pour différentes propriétés de l'objet de style.

Answer 6

Comme tout le monde suggère que je préfère également d'utiliser un class, mais si vous insistez, vous pouvez utiliser JS pour ce que vous utilisez CSS

document.getElementById('test').style.background = "url('img/test.jpg') no-repeat fixed « ;

Answer 7

Utiliser des propriétés de style suivant pour changer de fond:

document.getElementById('test').style.background 
document.getElementById('test').style.backgroundAttachment 
document.getElementById('test').style.backgroundClip 
document.getElementById('test').style.backgroundColor 
document.getElementById('test').style.backgroundImage 
document.getElementById('test').style.backgroundOrigin 
document.getElementById('test').style.backgroundPosition 
document.getElementById('test').style.backgroundPositionX 
document.getElementById('test').style.backgroundPositionY 
document.getElementById('test').style.backgroundRepeat 
document.getElementById('test').style.backgroundSize 

http://msdn.microsoft.com/en-us/library/ms535240%28v=vs.85%29.aspx