Ajoute le style à DOM ne pas remplacer existant

Comment ajouter élément de style à DOM sans éliminer le style existant sur l'élément (par exemple, la couleur, l'alignement du texte, etc). L'événement appelle la fonction, mais le problème est que le style est complètement remplacé par l'élément unique.Ajoute le style à DOM ne pas remplacer existant

J'ai code simple déclenché l'événement:

function changeback(onoff) 
    { 
     if(onoff){ 

      document.getElementById("field1").style.background="#fff"; 
     }else 
     document.getElementById("field1").style.background="#000"; 
    }

Source

2010-09-16 Codex73

Ce code n'est pas le problème. À moins que vous ne disiez que les autres propriétés d'arrière-plan sont remplacées, ce code ne devrait PAS affecter les autres propriétés de l'objet 'style' de l'élément. –

Quel navigateur utilisez-vous? Dans Chrome, cela fonctionne pour moi:

<html> 
<head> 
<style type="text/css"> 
    .test { background: #ff0000; font-family: "Verdana"; } 
</style> 
<script type="text/javascript"> 
    function changeback(onoff) 
    { 
    if(onoff){ 
     document.getElementById("field1").style.background="#0f0"; 
    } else { 
     document.getElementById("field1").style.background="#000"; 
    } 
    } 
</script> 
</head> 
<body> 
    <h1>Test</h1> 
    <p id="field1" onclick="changeback(true);" class="test">This is a test</p> 
</body> 
</html>

Lorsque je clique sur le texte, les changements de couleur de fond, mais le reste du style (dans ce cas, la police) reste le même.

Est-ce ce que vous essayez de faire?

Source

2010-09-16 04:13:30 AaronM

J'essaie d'ajouter au style existant, pas remplacer. Essayez d'ajouter un style à field1 puis d'ajouter la couleur avec javascript. – Codex73

@ Codex73: Votre commentaire n'a aucun sens. La réponse change juste la couleur d'arrière-plan et laisse le reste des paramètres de style seul. Quel est précisément votre problème? Quelle partie du style est réinitialisée? –

Oui. Votre tout à fait correct, problème de code mineur de mon côté. Merci pour votre aide, cela fonctionne. – Codex73

Voici comment vous pouvez le faire:

var elem = document.getElementById('YOUR ELEMENT ID'); 
elem.style.setProperty('border','1px solid black','');

elem.style est un objet qui implémente l'interface CSSStyleDeclaration qui supporte une fonction setProperty . Si vous vérifiez maintenant la propriété style dans Firebug, vous remarquerez l'ajout de la propriété border dans l'attribut style de l'élément.

Source

2010-09-16 17:16:50 Rajat

J'essaie d'ajouter au style existant, pas remplacer. Essayez d'ajouter un style à field1 puis d'ajouter la couleur avec javascript. Ça n'a pas fait l'affaire. – Codex73

Voici un exemple de jsFiddle: http://jsfiddle.net/KAjf2/ L'élément a déjà un style de "couleur: rouge". J'ajoute une "bordure" au style existant. Travailler en FF 3.5, Chrome – Rajat

Ajoute le style à DOM ne pas remplacer existant

Répondre

Questions connexes