Mit JavaScript zum Bearbeiten der CSS-Farbverlauf

Arbeite ich an der Bearbeitung von CSS-Gradienten mit Hilfe von JavaScript in Firefox.
Ich habe input-Felder, die der Benutzer setzen kann
1. Orientierung
2. 1. Farbe
3. 2. Farbe

Hier ist der html - 

<html>
    <head>
        <title>Linear Gradient Control</title>
        <script>
            function renderButton(){ 
            var orientation = document.getElementById("firstValue").value;
            var colorOne = document.getElementById("firstColor").value;
            var colorTwo = document.getElementById("secondColor").value;
            //alert(orientation);
            //alert(colorOne);
            //alert(colorTwo);

            };
        </script>
        <style>
            #mainHolder
            {
            width:500px;
            background: -moz-linear-gradient(left,  green,  red);

            }
        </style>
    </head>
    <body>
        <h1>Gradient Editor</h1>
        <form>
            <input type="text" id="firstValue">orientation</input><br />
            <input type="text" id="firstColor">first color</input><br />
            <input type="text" id="secondColor">second color</input><br />
        </form>
        <button type="button" onclick="renderButton()">Render</button>
        <div id="mainHolder">Content</div>
    </body>
</html>

So zur Erinnerung, der Benutzer geben Sie Ihre 3 Werte, die an die Funktion übergeben 'renderButton();'. Welche Zeile kann ich verwenden, um ändern Sie die 3 Werte der CSS3 Gradienten, so dass die Benutzer können Ihre eigenen benutzerdefinierten Farbverlauf-Boxen? Ich gehe davon aus, dass Ihr nur eine Linie oder zwei, die ich brauchen werden.

P. S. ich weiß, das Beispiel funktioniert nur in Firefox. Ich will einfach nur, um das Konzept nach unten, bevor die Arbeit auf verschiedenen Browsern.

InformationsquelleAutor onTheInternet | 2013-02-25
  1. 23

    Starten Sie mit so etwas wie die folgenden:

    var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

    Wenn Sie brauchen, um die Unterstützung für weitere Browser als den Firefox, das wird getan werden müssen, in Kombination mit browser-sniffing oder einige Modernizr-wie feature-Erkennung.

    Unten ist ein Beispiel, wie dies getan werden kann, verwenden Sie die feature-Erkennung ähnlich wie Modernizr (getestet in Firefox, Chrome, Safari, Opera).

    //Detect which browser prefix to use for the specified CSS value
//(e.g., background-image: -moz-linear-gradient(...);
//       background-image:   -o-linear-gradient(...); etc).
//

function getCssValuePrefix()
{
    var rtrnVal = '';//default to standard syntax
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    //Create a temporary DOM object for testing
    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        //Attempt to set the style
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';

        //Detect if the style was successfully set
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}

//Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';
    • Das funktionierte!!! Ich nicht erkennen, es war so einfach. Vielen, vielen Dank!
    • Ich fügte hinzu, ein Beispiel dafür, wie die Unterstützung unterschiedlicher Browser. Beachten Sie, dass IE9 und früher unterstützen keine Farbverläufe. Auch gibt es eine andere syntax für die frühen Versionen von webkit, die diese nicht abdecken.
    • Sie beantwortet meine Frage vor zwei Tagen, aber ich werde trotzdem upvote diese Antwort als gut. Danke!!!
    • Dieser test wird nie passieren für den einheitlichen syntax. Ich würde vorschlagen, die Einstellung eine variable als einen "return value" und setzen es an die erste "erfolgreich eingestellt" - Präfix anstatt es auf diese Weise, die Sie bereinigen kann das div, die Sie erstellt und zerstören es. Initialisieren Sie die return-variable "" so, dass die native syntax standardmäßig verwendet wird.
    • Ursprünglich hätte auch ein Ungültiger CSS-Eigenschaft. Meine änderungen sollten diesen Fehler korrigieren, die mit so wenig code zu verändern wie möglich. Toller post! Ich hatte nicht gedacht, der Umgang mit diesem auf diese Weise.
    • Ja, ich kann immer noch nicht erhalten, dies funktioniert, aber ich habe versucht, es zu beheben. Noch ein cooles Versuch obwohl.
    • Ich möchte hinzufügen break; innerhalb der for-Schleife if (dom.Stil.hintergrund) { rtrnVal = Präfixe[i]; break; }
    • var prefixes = [", '-webkit-', '-khtml-', '-moz-', '-ms-', '-o-'];

    InformationsquelleAutor Matt Coughlin
Schreibe einen Kommentar