recherche un moyen d'integrer du css a un fichier js

recherche un moyen d'integrer du css a un fichier js - HTML/CSS - Programmation

Marsh Posté le 03-12-2013 à 18:17:30    

bonjour,
je suis en train d’essayé de faire un petit script java-script pour greasemonkey  
et j'essaye de mettre un bouton switch on /off qui est en parti en css mais je ne sais pas comment inséré du css a un javascript
pour le moment j'ai déjà réussi a mettre du texte ('switch on / off') a la place du bouton que je veut mettre
 
ma question 1 : comment faire pour intégrer le css du bouton d'une façon ou d'un autre a mon javascript ??
ma question 2 : puis-je intégrer mon code html d'appel de mon bouton dans une ballise <li> étant donne que ca fait appel a un div ??
 
j'avoue être un peu perdu quand on commence a mélanger différent langage de prog
merci d'avance de votre aide et vos réponse
 
voila mon code avec le texte switch on/off :
 

Code :
  1. var newElement = document.createElement("li" ); // On crée un élément li (parce qu'on va l'inserer dans un <ul> )
  2. newElement.innerHTML= 'switch on / off'; // On écrit le code HTML qu'il contient
  3. newElement.setAttribute('style', 'float:left;');// on applique le style float:left pour que ça reste tout a gauche
  4. var elementPseudo = document.getElementById('pseudo');
  5. elementPseudo.parentElement.insertBefore(newElement, elementPseudo);


 

Code :
  1. //debut parti html pour boutton
  2. <div class="onoffswitch">
  3.     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
  4.     <label class="onoffswitch-label" for="myonoffswitch">
  5.     <div class="onoffswitch-inner"></div>
  6.     <div class="onoffswitch-switch"></div>
  7.     </label>
  8.     </div>
  9. // fin parti html du bouton


 

Code :
  1. //fichier css
  3.     .onoffswitch {
  4.     position: relative; width: 92px;
  5.     -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  6.     }
  7.     .onoffswitch-checkbox {
  8.     display: none;
  9.     }
  10.     .onoffswitch-label {
  11.     display: block; overflow: hidden; cursor: pointer;
  12.     border: 2px solid #000000; border-radius: 5px;
  13.     }
  14.     .onoffswitch-inner {
  15.     width: 200%; margin-left: -100%;
  16.     -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
  17.     -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
  18.     }
  19.     .onoffswitch-inner:before, .onoffswitch-inner:after {
  20.     float: left; width: 50%; height: 22px; padding: 0; line-height: 22px;
  21.     font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
  22.     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  23.     }
  24.     .onoffswitch-inner:before {
  25.     content: "ON";
  26.     padding-left: 8px;
  27.     background-color: #25E010; color: #FFFFFF;
  28.     }
  29.     .onoffswitch-inner:after {
  30.     content: "OFF";
  31.     padding-right: 8px;
  32.     background-color: #DE0404; color: #F7F2F2;
  33.     text-align: right;
  34.     }
  35.     .onoffswitch-switch {
  36.     width: 42px; margin: 0px;
  37.     background: #080808;
  38.     border: 2px solid #000000; border-radius: 5px;
  39.     position: absolute; top: 0; bottom: 0; right: 46px;
  40.     -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
  41.     -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
  42.     background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  43.     background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  44.     background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  45.     background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
  46.     }
  47.     .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  48.     margin-left: 0;
  49.     }
  50.     .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  51.     right: 0px;
  52.     }
  53. //fin de fichier css


Reply

Marsh Posté le 03-12-2013 à 18:17:30   

Reply

Marsh Posté le 03-12-2013 à 21:46:35    

Je ne sais pas si ça marchera mais tu peux essayer de créer une balise style, mettre les règles CSS dedans et l'insérer quelque part dans le HTML.
 

Code :
  1. var newElement = document.createElement("style" );
  2. newElement.innerHTML= '.onoffswitch { position: relative; width: 92px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }   etc. ';


Message édité par czh le 03-12-2013 à 21:47:11
Reply

Marsh Posté le 11-12-2013 à 21:41:59    

j'ai essayer ca ne fonctionne pas.

Reply

Marsh Posté le 14-01-2014 à 16:23:09    

Bonjour,
 
Si j'ai bien compris, tu veux pouvoir modifier le css à la volé avec JS ...  
Le plus simple est de changer le style avec "newElement.style"
 
Par exemple,  pour afficher ou cacher un element tu peux faire .style.display = "none";
 
Sinon en manipulant simplement les class =>  
var d = document.getElementById("div1" );
d.className = d.className + " otherclass";
 
Bonne chance :)


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed