la police,la taille de la police et de changement de couleur de javascript

Je suis en train de faire cette modification du code de la pré-texte écrit de police, taille de police, et la couleur avec un onclick du bouton mais je suis incapable de le faire fonctionner, c'est ce que j'ai à ce jour et im coincé. quelqu'un a des idées?

<html>
  <head> 
      <meta charset=utf-8 /> 
      <title>Change Paragraph Text</title> 
  </head>  
  <body> 
      <p id ='text'>I am going to change this text, I hope.</p>  
      <div>
        <button id="jschange" onclick="DoAll">Style</button> 
      </div>
      <script type="text/javascript">
         var style = 'text';
         function DoAll() {
            One(document.write.style.big());
            Two(document.write.style.fontsize(7));
            Three(document.write.style.fontcolor("red"));
         }
      </script>
  </body> 
</html>

Sérieusement, où avez-vous appris à propos de style avec document.write?
l'enseignement de mon auto pour la classe afin de différents sites web qui sont apparemment à me dire la mauvaise chose de vous suggérant lol

InformationsquelleAutor Piratica | 2015-01-27

0
```
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p id="style-target">This is the element which will change.</p>
    <button id="change-styles">Change Styles</button>
    <script>

      window.onload = function () {
        var changeStyles = query("#change-styles");
        var target = query("#style-target");

        changeStyles.onclick = function () {
          style(target, "fontSize", "18px");
          style(target, "color", "blue");
          style(target, "fontWeight", "bold");
        };
      };

      function style (el, property, value) {
        el.style[property] = value;
      }

      function query (selector) {
        return document.querySelector(selector);
      }
    </script>
  </body>
</html>
```
Ont un coup d'oeil;

J'ai pris la liberté d'ajouter le reste de la "nécessaire" HTML de pièces et de morceaux, là (surtout le DOCTYPE). Vous n'avez pas besoin de savoir ce que c'est là, pour l'instant, mais il permettra de résoudre beaucoup de problèmes à l'avenir, si vous avez toujours l'inclure dans le haut de chaque page HTML que vous écrivez, si vous avez l'intention de vraies personnes utilisation de cette page (fondamentalement, il fait d'Internet Explorer < IE10 sucer moins).

J'ai cassé ce bas en morceaux qui sont un peu plus sensible, en termes de JavaScript.

Dans la plupart des langages de programmation, vous voulez casser votre code en petits bits, pour le rendre plus facile à lire et à travailler avec.

JavaScript n'est pas vraiment très différent.

J'ai cassé en dehors en dehors de l'acte d'établissement de style, dans sa propre fonction d'assistance
```
el.style.color = "purple"; //takes `el` and makes an el{color:purple} rule
```
Le hic ici est que toute CSS "style" qui a un trait d'union ("taille de police", "couleur de fond") doit utiliser camelCase, lors de la définition de la valeur en JavaScript.
```
el.style.backgroundColor = "black";
```
J'ai créé une fonction d'assistance appelé style, que j'ai ensuite reportez-vous à l'intérieur de mon window.onload code.

Dans ce cas particulier, je ne suis pas de gagner beaucoup, en termes de ce que je suis en tapant (en fait, je suis en tapant plus), mais qu'il serait me sauver, dans un cas plus complexe, est la probabilité de manquer de quelque chose, en me répéter, ou de le copier/coller...

En appelant style(el, "fontWeight", "bold"); je n'ai pas à vous rappeler comment définir le style pour les vieux navigateurs, par rapport aux nouveaux navigateurs, par rapport à des styles qui ont été définies à l'aide de JS plus tôt, par rapport à ceux qui n'ont pas (un sujet pour les personnes concernées par les sites professionnels qui ont à travailler sur les anciens navigateurs).

Si vous regardez à l'intérieur de la définition de style que j'ai écrit, vous verrez que je vais appeler el.style[property]; normalement, quand on sait que le nom de la chose que nous recherchons, sur un objet, nous utilisons un point pour séparer person.name; //"Bob".

Dans les circonstances où nous faudra chercher des propriétés différentes, nous utilisons [<property-name>] pour les séparer.

var property = "age");
personne[de propriété]; //32

Prochaine, je suis en utilisant document.querySelector( selector ); à trouver les éléments que je veux, en passant un CSS sélecteur de style.

document.querySelector fonctionne sur pratiquement tous les navigateurs faite dans les 6 dernières années.

Je suis saisissant l'élément que je veux modifier les styles, et je suis de l'accaparement de l'élément, je suis à l'écoute (en attente d'un utilisateur à cliquer).

Alors je suis réglage de la onclick du bouton à une fonction qui se déclenche tout un tas de modifications que j'ai préciser.

Dans ce cas, le onclick ne va changer les styles.

Vous ne souhaitez généralement utiliser onclick ou des propriétés similaires; normalement, vous souhaitez utiliser un processus appelé event-registration ou "à l'écoute", mais qui va un peu trop loin, pour un exemple simple.

Pour l'instant, de saisir les éléments, séparer vos "comment faire" détails de mise en œuvre de "quand" X "faire " Y"," exécution des détails, et regarder la magie se produire.

Assez drôle, ce n'est pas beaucoup plus que le code jQuery suggestion fournis dans une autre réponse...

...mais c'est un tout, gigantesque bibliothèque qui vous auriez à charge (si vous étiez encore autorisé), il suffit de sélectionner une chose et de changer son style.

Aussi, à l'aide de la "jQuery solution" aux problèmes les plus courants, bien souvent vous apprendre de mauvaises habitudes, ou alternativement, ne pas apprendre de bonnes habitudes qui vous devez savoir, si vous n'aviez pas eu la solution rapide et facile en face de vous.

jQuery, utilisé par la plupart des gens, est particulièrement mauvais au sujet de référence de mise en cache (ou l'absence de celui-ci). Si largement utilisé jQuery modèles sont employés à la production de site web, sans penser à se mettre à l'intérieur (surtout si vous n'êtes pas à l'aide de jQuery, mais une autre bibliothèque comme elle), vous pouvez tuer votre site web de la performance.

InformationsquelleAutor Norguard

Essayer cela, c'est beaucoup plus simple d'approche et de ne pas rendre les yeux de quelqu'un saigner:

<button onclick="restyle()">Click me to see some results</button>

<p id="changeable">Text that will change.</p>

<script>
   function restyle() {
      var element = document.getElementById("changeable");
      element.style.fontsize(7);
      element.style.fontcolor("red");
      element.innerHTML = "changed text";
   }
</script>

Je suis encore à apprendre le Javascript trop, donc si il ya des experts là-bas, je serais ravi d'entendre ce qu'ils pensent! 🙂

InformationsquelleAutor Elegant.Scripting

0

Essayez plutôt ceci que le code js:
```
var sstyle = 'text';
function DoAll() {
   var elem = document.getEelementById(sstyle);
   elem.style.fontSize = "7px";
   elem.style.color= "red";
}
```
- Les blocs de Code sur leur propre ne sont généralement pas de réponses utiles. Veuillez expliquer ce que le code dont vous faites preuve, et pourquoi/comment ce code répond à la question.
InformationsquelleAutor OnlyMAJ

Je pense que vous devriez faire comme ceci:

<html>
  <head>
     <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
     <p id ='text'>I am going to change this text, I hope.</p>  
     <div>
       <button id="jschange" onclick="DoAll()">Style</button> 
     </div>

    <script>
      function DoAll() {
        $('#text').css('font-size', '7').css('color', 'red');
      }
    </script>
  </body>
</html>

Les blocs de Code sur leur propre ne sont généralement pas de réponses utiles. Veuillez expliquer ce que le code dont vous faites preuve, et pourquoi/comment ce code répond à la question.

InformationsquelleAutor Alex Vazhev

Vous pouvez essayer ceci:

<!DOCTYPE html>
<html>
  <body>

    <p>Click the button to display a string in a specified size.</p>
    <button onclick="myFunction()">Try it</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            var str = "Hello World!";
            var result = str.fontsize(7);
            document.getElementById("demo").innerHTML = result;
        }
    </script>
  </body>
</html>

Les blocs de Code sur leur propre ne sont généralement pas de réponses utiles. Veuillez expliquer ce que le code dont vous faites preuve, et pourquoi/comment ce code répond à la question.

InformationsquelleAutor Neminath

Vous devez vous connecter pour publier un commentaire.