Comment appliquer le style CSS à un document.write()?

J'ai un programme qui va utiliser Javascript pour "imprimer" une valeur à l'écran à l'aide de document.write()'. La valeur de l'imprimé est un entier. Je suis à la recherche pour être en mesure d'utiliser les CSS pour appliquer un style à cet entier qui est en train d'être imprimé. Ci-dessous quelques tronquée des exemples de code de ce que j'ai essayé de faire, mais il ne fonctionne pas (le programme se ferme:

var number = 5 //just for an example
document.write('<p id="jstext"' + number + '</p>')

et c'est le code CSS que j'utilise:

#jstext {
    text-align: center;
    font-size: 90px;
}

Grâce

  • le point-virgule manquant à la fin de la ligne, une faute de frappe?
InformationsquelleAutor ethanzh | 2015-08-24
  1. 4

    Que c'est faux. Voir la correction:

    var number = 5; //just for an example
//------------^ //Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

    Vous avez oublié une clôture > ici.

    De travail extrait de code ci-dessous:

    CSS:

    #jstext {
  text-align: center;
  font-size: 90px;
}

    HTML:

    <script>
var number = 5; //just for an example
//------------^ //Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^
</script>

    Mise à JOUR: Ne pas utiliser la méthode précédente.

    La méthode ci-dessus est totalement faux. Il va supprimer tous les gestionnaires d'événements et totalement endommager les DOM. Une meilleure façon est d'utiliser:

    document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;

    Extrait de

    CSS:

    #jstext {
  text-align: center;
  font-size: 90px;
}

    HTML:

    <script>
var number = 5; //just for an example
//------------^ //Not sure but ; is a must in some places.
document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;
</script>

    • Ahh merci! Il fonctionne maintenant. Encore une question, quel est l'avantage de le faire progressivement, en utilisant innerHTML? Quelle est la différence dans la production?
    • innerHTML travaux sur l'élément déjà existant, plutôt. :)
    • Il est donc préférable d'utiliser votre méthode de innerHTML? 🙂
    • Dépend du cas. Les deux sont mieux.
    • Ma compréhension est que le document.écrire va forcer le rechargement de l'ensemble du document, de sorte innerHTML est préférable pour des raisons de performances.
    • C'est un bon moyen de changer de code. Je vais mettre à jour le code d'emblée.

    InformationsquelleAutor Praveen Kumar Purushothaman