Changer les valeurs CSS avec Javascript
Il est facile de définir des valeurs CSS en ligne avec javascript. Si je veux changer la largeur et que j'ai du code HTML comme ceci:
<div style="width: 10px"></div>
Tout ce que je dois faire c'est:
document.getElementById('id').style.width = value;
Cela modifiera les valeurs de la feuille de style intégrée. Normalement, cela ne pose pas de problème, car le style en ligne remplace la feuille de style. Exemple:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
En utilisant ce Javascript:
document.getElementById('tId').style.width = "30%";
Je reçois ce qui suit:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>
C'est un problème, parce que non seulement je ne veux pas changer les valeurs inline, si je cherche la largeur avant de la définir, quand j'ai:
<div id="tId"></div>
La valeur renvoyée est Null. Par conséquent, si javascript a besoin de connaître la largeur de quelque chose, il est logique de le faire (j'augmente la largeur de 1%, pas à une valeur spécifique). "ne fonctionne pas vraiment.
Donc ma question: j'ai des valeurs dans un style CSS qui ne sont pas situées en ligne, comment puis-je obtenir ces valeurs? Comment puis-je modifier le style au lieu des valeurs en ligne, à partir d'un identifiant?
Ok, on dirait que vous voulez changer le CSS global, ce qui changera tous les éléments d’un style particulier à la fois. J'ai récemment appris à le faire moi-même grâce à un didacticiel Shawn Olson . Vous pouvez directement référencer son code ici .
Voici le résumé:
Vous pouvez récupérer les stylesheets via document.styleSheets. Cela renverra en réalité un tableau de toutes les feuilles de style de votre page, mais vous pouvez indiquer celle sur laquelle vous vous trouvez via la propriété document.styleSheets[styleIndex].href. Une fois que vous avez trouvé la feuille de style que vous souhaitez modifier, vous devez obtenir le tableau de règles. Ceci est appelé "règles" dans IE et "cssRules" dans la plupart des autres navigateurs. Le moyen de savoir sur quel CSSRule vous êtes est par 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.
Faites-moi savoir comment cela fonctionne pour vous, et s'il vous plaît commenter si vous voyez des erreurs.
S'il vous plaît! Il suffit de demander à w3 ( http://www.quirksmode.org/dom/w3c_css.html )! 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 décrit dans la réponse de @ user21820, il pourrait être un peu inutile de modifier toutes les feuilles de style de la page. Le script suivant fonctionne avec IE5.5 ainsi que la dernière version de Google Chrome et ajoute uniquement 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);
Rassemblant 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(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
}
C'est un moyen de mettre dans le CSS des valeurs qui seront utilisées dans JS même si le navigateur ne les comprend pas. par exemple. maxHigh pour un tbody dans un tableau déroulant.
Appel :
CCSStylesheetRuleStyle('default', "#mydiv", "height");
CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");
Je ne sais pas pourquoi les autres solutions traitent de la liste complète des feuilles de style du 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 nos 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 définis directement sur les éléments en ajoutant "! Important" à la valeur de la propriété, sauf s'il existe déjà des déclarations de style "! Important" plus spécifiques pour cette propriété.
Je n'ai pas assez de représentants pour commenter, je vais donc formater une réponse, mais ce n'est qu'une démonstration du problème en question.
Il semble que lorsque les styles d'élément sont définis dans des feuilles de style, ils ne sont pas visibles par getElementById ("someElement"). Style
Ce code illustre le problème ... Code de dessous sur jsFiddle .
Dans le test 2, lors du premier appel, la valeur des éléments laissés n'est pas définie et, par conséquent, ce qui devrait être une simple bascule est perturbé. Pour mon utilisation, je définirai mes valeurs de style importantes en ligne, mais cela semble aller à l'encontre de l'objectif 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 le problème.
Sauter
Vous pouvez obtenir les styles "calculés" de n'importe quel élément.
IE utilise quelque chose appelé "currentStyle", Firefox (et je suppose que les autres navigateurs "conformes au standard") utilise "defaultView.getComputedStyle".
Pour ce faire, vous devrez écrire une fonction de navigateur croisé ou utiliser un bon framework Javascript tel que prototype ou jQuery (recherchez "getStyle" dans le fichier prototype javascript et "curCss" dans le fichier javascript jquery).
Cela dit, si vous avez besoin de la hauteur ou de la largeur, vous devriez probablement utiliser element.offsetHeight et element.offsetWidth.
La valeur renvoyée est Null. Par conséquent, si javascript a besoin de connaître la largeur de quelque chose, il est logique de le faire (j'augmente la largeur de 1%, pas à une valeur spécifique)
Attention, si vous ajoutez un style inline à l'élément en question, il peut agir en tant que valeur "par défaut" et sera lisible par Javascript lors du chargement de la page, puisqu'il s'agit de la propriété de style inline de l'élément:
<div style="width:50%">....</div>
Peut-être essayez ceci:
function CCSStylesheetRuleStyle(stylesheet, selectorText, style, 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
}
Ce Gist simple de 32 lignes vous permet d’identifier une feuille de style donnée et de changer très facilement ses styles:
var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");
Je n'ai jamais vu d'utilisation pratique de cela, mais vous devriez probablement envisager/ feuilles de style DOM . Cependant, honnêtement, je pense que c'est exagéré.
Si vous voulez simplement obtenir la largeur et la hauteur d'un élément, quel que soit le lieu d'application des dimensions, utilisez simplement element.offsetWidth et element.offsetHeight.