Modification des valeurs CSS avec JavaScript

Question

Il est facile de définir les valeurs CSS en ligne avec javascript. Si je veux changer la largeur et je html comme ceci:

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

Tout ce que je dois faire est:

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

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

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

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

En utilisant cette 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> 

Ceci est un problème, parce que non seulement je ne veux pas changer les valeurs inline, Si Je cherche la largeur avant de le mettre, quand j'ai:

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

La valeur renvoyée est Null, donc si j'ai Javascript qui a besoin de connaître la largeur de quelque chose pour faire de la logique (j'augmente la largeur de 1%, pas à une valeur spécifique), retourner Null quand j'attend la chaîne 50% "ne fonctionne pas vraiment.

Donc, ma question: J'ai des valeurs dans un style CSS qui ne sont pas situés en ligne, comment puis-je obtenir ces valeurs? Comment puis-je modifier le style au lieu des valeurs inline, donné un identifiant?

Answer 1

Ok, il semblerait que vous vouliez changer le CSS global, ce qui changerait efficacement tous les éléments d'un style Petticic à la fois. J'ai récemment appris comment le faire moi-même à partir d'un Shawn Olson tutorial. Vous pouvez directement référencer son code here.

Voici le résumé:

Vous pouvez récupérer le stylesheets via document.styleSheets. Cela retourne réellement un tableau de toutes les feuilles de style de votre page, mais vous pouvez dire lequel vous êtes sur la propriété document.styleSheets[styleIndex].href. Une fois que vous avez trouvé la feuille de style que vous voulez éditer, vous devez obtenir le tableau des règles. Ceci est appelé "règles" dans IE et "cssRules" dans la plupart des autres navigateurs. La façon de dire à quoi vous vous trouvez est la propriété selectorText. Le code de travail ressemble à 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. 

Permettez-moi savoir comment cela fonctionne pour toi, et s'il vous plaît commentaire si vous voyez des erreurs.

Answer 2

Je n'ai jamais vu une utilisation pratique de cela, mais vous devriez probablement considérer DOM stylesheets. Cependant, je pense honnêtement que c'est exagéré.

Si vous souhaitez simplement obtenir la largeur et la hauteur d'un élément, quel que soit l'endroit d'application des dimensions, utilisez simplement element.offsetWidth et element.offsetHeight.

Answer 3

Vous pouvez obtenir les styles "calculés" de n'importe quel élément.

IE utilise quelque chose appelé "currentStyle", Firefox (et j'imagine que d'autres navigateurs "standard") utilise "defaultView.getComputedStyle".Pour ce faire, vous devez écrire une fonction de navigateur croisé ou utiliser un bon framework Javascript comme prototype ou jQuery (recherchez "getStyle" dans le fichier prototype javascript et "curCss" dans le fichier jquery javascript) . Cela dit, si vous avez besoin de la hauteur ou de la largeur, vous devriez probablement utiliser element.offsetHeight et element.offsetWidth.

La valeur retournée est nulle, donc si je Javascript qui a besoin de connaître la largeur de quelque chose à faire une certaine logique (j'augmenter la largeur de 1%, et non à une valeur spécifique)

l'esprit, si vous ajoutez un style en ligne à l'élément en question, il peut agir comme la valeur « par défaut » et sera lisible par Javascript est désactivé sur chargement de la page, car il est la propriété de style en ligne de l'élément:

<div style="width:50%">....</div> 

Answer 4

I Je n'ai pas assez de commentaire pour commenter, donc je vais mettre en forme une réponse, mais c'est seulement une démonstration de la question en question.

Il semble, lorsque les styles d'éléments sont définis dans les feuilles de style, ils ne sont pas visibles au style

Ce code getElementById ("someElement"). Illustre la question ... Code from below on jsFiddle.

Dans le test 2, lors du premier appel, la valeur de gauche des éléments n'est pas définie, et donc, ce qui devrait être une simple bascule est foiré. Pour mon usage, je vais définir mes valeurs de style importantes en ligne, mais cela semble partiellement contrecarrer le 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.

Passer à

Answer 5

S'il vous plaît! Il suffit de demander w3 (http://www.quirksmode.org/dom/w3c_css.html)! Ou en fait, cela m'a pris cinq heures ... mais le voilà!

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 facile à utiliser .. exemple:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div> 
Or: 
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div> 
Or: 
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div> 

Oh ..

---

EDIT: @ comme user21820 décrit dans sa réponse, il pourrait être un peu inutile de changer toutes les feuilles de style sur la page. Le script suivant fonctionne avec IE5.5 ainsi que le dernier Google Chrome, et ajoute seulement la fonction css() décrite ci-dessus.

(function (scope) { 
    // Create a new stylesheet in the bottom 
    // of <head>, where the css rules will go 
    var style = document.createElement('style'); 
    document.head.appendChild(style); 
    var stylesheet = style.sheet; 
    scope.css = function (selector, property, value) { 
     // Append the rule (Major browsers) 
     try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length); 
     } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9) 
     } catch(err) {console.log("Couldn't add style");}} // (alien browsers) 
    } 
})(window); 

Answer 6

Rassembler le code dans les réponses, je l'ai écrit cette fonction qui semble fonctionne bien 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(stylesheet) != -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 
} 

Ceci est un moyen de mettre les valeurs dans le css qui sera utilisé dans JS même si non compris par le navigateur. par exemple. maxHeight pour un tbody dans un tableau déroulant.

Appel:

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

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

Answer 7

Je ne sais pas pourquoi les autres solutions passent par toute la liste des feuilles de style pour le document. Cela crée une nouvelle entrée dans chaque feuille de style, ce qui est inefficace. Au lieu de cela, nous pouvons simplement ajouter une nouvelle feuille de style et y ajouter simplement les règles CSS souhaitées.

style=document.createElement('style'); 
document.head.appendChild(style); 
stylesheet=style.sheet; 
function css(selector,property,value) 
{ 
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); } 
    catch(err){} 
} 

Notez que nous pouvons remplacer même les styles en ligne directement sur les éléments définis en ajoutant « ! Important » à la valeur de la propriété, à moins qu'il existe déjà des déclarations plus de style spécifiques « ! Important » pour cette propriété.

Answer 8

This simple 32 lines gist vous permet d'identifier une feuille de style donnée et de modifier ses styles très facilement:

var styleSheet = StyleChanger("my_custom_identifier"); 
styleSheet.change("darkolivegreen", "blue");