it-swarm.com.de

CSS-Werte mit Javascript ändern

Es ist einfach, Inline-CSS-Werte mit Javascript festzulegen. Wenn ich die Breite ändern möchte und ich habe HTML so:

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

Alles was ich tun muss ist:

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

Die Inline-Stylesheet-Werte werden geändert. Normalerweise ist dies kein Problem, da der Inline-Stil das Stylesheet überschreibt. Beispiel:

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

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

Mit diesem Javascript:

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

Ich bekomme folgendes:

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

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

Dies ist ein Problem, da ich nicht nur die Inline-Werte nicht ändern möchte. Wenn ich die Breite suche, bevor ich sie einstelle, habe ich:

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

Der zurückgegebene Wert ist Null. Wenn ich also Javascript habe, muss die Breite von etwas bekannt sein, um Logik zu tun (ich vergrößere die Breite um 1%, nicht auf einen bestimmten Wert). Wenn ich den String "50% "funktioniert nicht wirklich.

Meine Frage: Ich habe Werte in einem CSS-Stil, die nicht inline liegen. Wie kann ich diese Werte erhalten? Wie kann ich den Stil anstelle der Inline-Werte mit einer ID ändern?

101
Coltin

Ok, es klingt so, als ob Sie das globale CSS so ändern möchten, dass alle Elemente eines peticularen Stils gleichzeitig effektiv geändert werden. Ich habe vor kurzem gelernt, wie man das selbst aus einem Shawn Olson Tutorial macht. Sie können direkt auf seinen Code hier verweisen.

Hier ist die Zusammenfassung:

Sie können die stylesheets über document.styleSheets abrufen. Dadurch wird tatsächlich ein Array aller Stylesheets auf Ihrer Seite zurückgegeben. Sie können jedoch über die document.styleSheets[styleIndex].href -Eigenschaft erkennen, zu welchem ​​Stylesheet Sie gehören. Wenn Sie das Stylesheet gefunden haben, das Sie bearbeiten möchten, müssen Sie das Array mit Regeln abrufen. In den meisten anderen Browsern wird dies in IE und "cssRules" als "Regeln" bezeichnet. Um herauszufinden, auf was CSSRule Sie sich befinden, verwenden Sie die selectorText -Eigenschaft. Der Arbeitscode sieht ungefähr so ​​aus:

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.

Lassen Sie mich wissen, wie dies für Sie funktioniert, und kommentieren Sie dies bitte, wenn Sie Fehler sehen.

88
Mike

Bitte! Fragen Sie einfach w3 ( http://www.quirksmode.org/dom/w3c_css.html )! Eigentlich habe ich fünf Stunden gebraucht ... aber hier ist es!

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
    }
}

Die Funktion ist sehr einfach zu bedienen. Beispiel:

<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: Wenn @ user21820 in seiner Antwort beschrieben wird, ist es möglicherweise nicht erforderlich, alle Stylesheets auf der Seite zu ändern. Das folgende Skript funktioniert mit IE5.5 sowie dem neuesten Google Chrome und fügt nur die oben beschriebene Funktion css () hinzu.

(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);
43
Leonard Pauli

Ich habe den Code in den Antworten zusammengefasst und diese Funktion geschrieben, die auf meinem FF 25 gut zu laufen scheint.

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
}

Dies ist eine Möglichkeit, Werte in das CSS einzufügen, die in JS verwendet werden, auch wenn sie vom Browser nicht verstanden werden. z.B. maxHeight für einen Körper in einer gescrollten Tabelle.

Anruf :

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

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

10
FrViPofm

Ich weiß nicht, warum die anderen Lösungen die gesamte Liste der Stylesheets für das Dokument durchlaufen. Dadurch wird in jedem Stylesheet ein neuer Eintrag erstellt, der ineffizient ist. Stattdessen können wir einfach ein neues Stylesheet anfügen und dort einfach die gewünschten CSS-Regeln hinzufügen.

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){}
}

Beachten Sie, dass wir sogar Inline-Stile überschreiben können, die direkt für Elemente festgelegt wurden, indem Sie dem Wert der Eigenschaft "! Important" hinzufügen, es sei denn, es gibt bereits spezifischere "! Important" -Stilddeklarationen für diese Eigenschaft.

4
user21820

Ich habe nicht genug Vertreter, um einen Kommentar abzugeben, also werde ich eine Antwort formatieren, aber es ist nur eine Demonstration des fraglichen Problems.

Es scheint, als wenn Elementstile in Stylesheets definiert werden, sind sie für getElementById ("someElement") nicht sichtbar

Dieser Code veranschaulicht das Problem ... Code von jsFiddle von unten.

In Test 2 ist beim ersten Aufruf der Wert für die Elemente, die übrig bleiben, undefiniert, und so wird ein einfaches Umschalten durcheinander gebracht. Für meine Verwendung definiere ich meine wichtigen Stilwerte inline, aber es scheint den Zweck des Stylesheets teilweise zu vernachlässigen.

Hier ist der Seitencode ...

<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>

Ich hoffe, das hilft, das Problem zu beleuchten.

Überspringen

3
BentFX

Sie können die "berechneten" Stile von jedem Element erhalten.

IE verwendet etwas namens "currentStyle", Firefox (und ich nehme an, dass andere "standardkonforme" Browser) "defaultView.getComputedStyle" verwenden.

Sie müssen dazu eine Cross-Browser-Funktion schreiben oder ein gutes Javascript-Framework wie Prototype oder jQuery verwenden (suchen Sie in der Prototyp-Javascript-Datei nach "getStyle" und in der Javascript-Javascript-Datei "curCss").

Das heißt, wenn Sie die Höhe oder Breite benötigen, sollten Sie wahrscheinlich element.offsetHeight und element.offsetWidth verwenden.

Der zurückgegebene Wert ist Null. Wenn ich also Javascript habe, muss ich die Breite von etwas kennen, um etwas Logik zu tun (ich erhöhe die Breite um 1%, nicht auf einen bestimmten Wert).

Wenn Sie dem fraglichen Element einen Inline-Stil hinzufügen, kann es als "Standardwert" dienen und kann beim Laden der Seite von Javascript gelesen werden, da es sich um die Inline-Stileigenschaft des Elements handelt:

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

Versuchen Sie es vielleicht einmal:

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
}
0
Shaq

Mit diesem einfachen 32-Zeilen-Gist können Sie ein bestimmtes Stylesheet identifizieren und seine Stile sehr einfach ändern:

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

Ich habe noch nie einen praktischen Gebrauch davon gesehen, aber Sie sollten wahrscheinlich DOM-Stylesheets in Betracht ziehen. Ich denke jedoch, dass das übertrieben ist.

Wenn Sie einfach die Breite und Höhe eines Elements abrufen möchten, unabhängig davon, wo die Bemaßungen angewendet werden, verwenden Sie einfach element.offsetWidth und element.offsetHeight.

0
Rakesh Pai