oziris-34 | 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 :
- var newElement = document.createElement("li" ); // On crée un élément li (parce qu'on va l'inserer dans un <ul> )
- newElement.innerHTML= 'switch on / off'; // On écrit le code HTML qu'il contient
- newElement.setAttribute('style', 'float:left;');// on applique le style float:left pour que ça reste tout a gauche
- var elementPseudo = document.getElementById('pseudo');
- elementPseudo.parentElement.insertBefore(newElement, elementPseudo);
|
Code :
- //debut parti html pour boutton
- <div class="onoffswitch">
- <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
- <label class="onoffswitch-label" for="myonoffswitch">
- <div class="onoffswitch-inner"></div>
- <div class="onoffswitch-switch"></div>
- </label>
- </div>
- // fin parti html du bouton
|
Code :
- //fichier css
- .onoffswitch {
- position: relative; width: 92px;
- -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
- }
- .onoffswitch-checkbox {
- display: none;
- }
- .onoffswitch-label {
- display: block; overflow: hidden; cursor: pointer;
- border: 2px solid #000000; border-radius: 5px;
- }
- .onoffswitch-inner {
- width: 200%; margin-left: -100%;
- -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
- -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
- }
- .onoffswitch-inner:before, .onoffswitch-inner:after {
- float: left; width: 50%; height: 22px; padding: 0; line-height: 22px;
- font-size: 15px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
- -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
- }
- .onoffswitch-inner:before {
- content: "ON";
- padding-left: 8px;
- background-color: #25E010; color: #FFFFFF;
- }
- .onoffswitch-inner:after {
- content: "OFF";
- padding-right: 8px;
- background-color: #DE0404; color: #F7F2F2;
- text-align: right;
- }
- .onoffswitch-switch {
- width: 42px; margin: 0px;
- background: #080808;
- border: 2px solid #000000; border-radius: 5px;
- position: absolute; top: 0; bottom: 0; right: 46px;
- -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
- -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
- background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
- background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
- background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
- background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
- }
- .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
- margin-left: 0;
- }
- .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
- right: 0px;
- }
- //fin de fichier css
|
|
