Changement de CSS Valeurs avec Javascript

Question

Il est facile à mettre du CSS valeurs avec javascript. Si je veux modifier la largeur et la j'ai le html comme ceci:

<div style="width: 10px"></div>

Tout ce que je dois faire c'est:

document.getElementById('id').style.width = value;

Il va changer la feuille de style inline valeurs. Normalement, ce n'est pas un problème, parce que le style en ligne remplace la feuille de style. Exemple:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

En utilisant ce code Javascript:

document.getElementById('tId').style.width = "30%";

Je reçois le texte suivant:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

C'est un problème, parce que non seulement j'ai pas envie de changer inline valeurs, Si je regarde pour la largeur avant je l'ai mis, lorsque j'ai:

<div id="tId"></div>

La valeur retournée est Null, alors, si j'ai un script Javascript qui doit connaître la largeur d'une chose à faire un peu de logique (je l'augmentation de la largeur de 1%, et non à une valeur spécifique), le retour Null quand je m'attends à la chaîne "50%" ne fonctionne pas vraiment.

Donc ma question: j'ai des valeurs dans une feuille de style CSS qui ne sont pas situés en ligne, comment puis-je obtenir ces valeurs? Comment puis-je modifier le style au lieu de la ligne des valeurs, étant donné un id?

Answer 1

Ok, il semble que vous voulez changer le global CSS ce qui sera effictively changer tous les éléments d'un peticular style à la fois. J'ai récemment appris à le faire moi-même à partir d'un Shawn Olson tutoriel. Vous pouvez le faire directement référence à son code ici.

Voici le résumé:

Vous pouvez récupérer les feuilles de style via document.styleSheets. Cela permettra en fait de retourner un tableau de toutes les feuilles de style dans votre page, mais vous pouvez dire que vous êtes à l'aide de l' document.styleSheets[styleIndex].href de la propriété. Une fois que vous avez trouvé la feuille de style que vous souhaitez modifier, vous avez besoin pour obtenir le tableau de règles. Cela s'appelle "règles" dans IE et "cssRules" dans la plupart des autres navigateurs. La façon de dire ce que CSSRule vous êtes sur le selectorText de la propriété. Le code de travail ressemble à quelque chose comme ceci:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Laissez-moi savoir comment cela fonctionne pour toi, et merci de commenter si vous voyez des erreurs.

Answer 2

S'il vous plaît! Il suffit de demander w3 (http://www.quirksmode.org/dom/w3c_css.html)! Ou plutôt, il m'a fallu cinq heures... mais ici il est!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

La fonction est vraiment facilité d'utilisation.. exemple:

Souris-Moi!

<div id="box" class="boxes" onmouseover="css('#box', 'color', 'red')">Mouseover Me!</div>

Ou:

Souris-Moi!

<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>

Ou:

Souris-Moi!

<div class="boxes" onmouseover="css('body', 'border', '1px solid #3cc')">Mouseover Me!</div>

Oh..

Answer 3

Rassemblement le code dans les réponses, j'ai écrit cette fonction qui semble bien fonctionner sur mon FF 25.

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf('default') !== -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value === undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

C'est une façon de placer les valeurs dans le fichier css qui sera utilisé dans le JS, même si ne sont pas compris par le navigateur. par exemple, maxHeight pour tbody dans un défilé de la table.

Composez le :

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

Answer 4

Je n'ai pas de rep assez de commentaire, donc je vais formater une réponse, mais c'est seulement une démonstration de l'émission en question.

Il semble que, lorsque l'élément de styles sont définis dans les feuilles de style, ils ne sont pas visibles pour getElementById("someElement").style

Ce code illustre le problème... Code à partir de ci-dessous sur jsFiddle.

Dans l'Essai 2, le premier appel, les éléments à gauche de la valeur est undefined, et donc, ce qui devrait être une simple bascule se foiré. Pour mon utilisation, je vais définir les valeurs de style inline, mais il ne semble pas en partie à l'encontre du but de la feuille de style.

Voici le code de la page...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

J'espère que cela aide à éclairer la question.

Sauter