»
AnglaisFrançaisVietnamien

Imprimer - Ajouter la feuille de style CSS par JavaScript - JavaScriptBank.com

Version complète: jsB@nk » Snippet » Ajouter la feuille de style CSS par JavaScript
URL: https://www.javascriptbank.com/add-css-stylesheet-by-javascript.html

Ajouter la feuille de style CSS par JavaScript © JavaScriptBank.comNormalement, développeurs de sites Web aura lieu CSS code en une paire de tags tels que ou à un Fichier CSS. Mais dans ce extrait, Nous sommes la création de CSS JavaScript dans la définition que navigateurs toujours de comprendre ces Propriétés CSS. Bien que cette CSS par exemple est plus complexe que les anciens CSS définition, mais il est l'un des moyens de développer le site, vous estiment qu'il s'agit mai Tutoriel CSS qui mérite tout à fait à voir.

Version complète: jsB@nk » Snippet » Ajouter la feuille de style CSS par JavaScript
URL: https://www.javascriptbank.com/add-css-stylesheet-by-javascript.html



JavaScript
<script type="text/javascript" name="addStyleSheet.js">// Created by: Ultimater :: http://invisionfree.com/forums/Black_Forest_Boards/* The addNewStyleSheetByFullCSS function accepts one argument, the full CSS to be used within the style sheet, and the new style sheet is appended to the DOM tree automatically. */function addNewStyleSheetByFullCSS(innerCSS){  var h=document.getElementsByTagName("head");if(!h.length)return;  var newStyleSheet=document.createElement("style");  newStyleSheet.type="text/css";  h[0].appendChild(newStyleSheet);  try{    newStyleSheet.styleSheet.cssText=innerCSS;  }catch(e){try{    newStyleSheet.appendChild(document.createTextNode(innerCSS));    newStyleSheet.innerHTML=innerCSS;  }catch(e){}}}// ============var fullCSS=''+'nbody { margin: 20px 10px 10px 10px; padding: 0; background-color: #FFFFFF; color: #000000;'+'nfont-family:serif; font-size:medium;'+'n}'+'ntr { vertical-align: top;  }'+'n.fieldframe { background-color: #F1F2F6; color: #929BAB; border: 1px solid #929BAB; padding: 5px }'+'n.buttonframe { background-color: #F1F2F6; color: #929BAB; margin-top: 10px; border: 1px solid #929BAB; padding: 5px }'+'n.field { background-color: #E3E4EA; color: #000000; border: 1px solid #929BAB;}'+'n.label { background-color: #E3E4EA; color: #000000; font-weight: bold; vertical-align: top;'+'nwidth:180px;border:1px solid #929BAB;'+'n}'+'n.input { background-color: #F1F2F6; color: #5D636E; vertical-align: top;'+'nwidth: 80px; border:1px solid #929BAB; padding:2px;'+'n}'+'n.input input{'+'nbackground-color: white; color: black; border:0 none;'+'n}'+'n.button { background-color: #E3E4EA; color: #5D636E; border: 1px solid #929BAB; margin: 1px;  }'+'n.button:hover { background-color: #F4F4F6; color: #5D636E; border: 1px solid #929BAB; margin: 1px;  }'+'ndiv.field{'+'nmargin:0;padding:2px;'+'n}n'addNewStyleSheetByFullCSS(fullCSS);</script>


HTML
<div class="label">I am styling!</div>