2

2 つの異なるテキスト フィールドにカラー コードを入力して、ユーザーが div のグラデーションを設定できるスクリプトを作成したいと考えています。

これは私のコードです:

        <style>
        #gradient {
            background: #0A284B;
    background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
    background: -webkit-linear-gradient(#0A284B, #135887);
    background: -moz-linear-gradient(top, #0A284B, #135887);
    background: -ms-linear-gradient(#0A284B, #135887);
    background: -o-linear-gradient(#0A284B, #135887);
    background: linear-gradient(#0A284B, #135887);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
    zoom: 1;    }  
    </style>


    <script>

    function myFunction()
    {
    color1 = document.getElementById("color1").value;
    color2 = document.getElementById("color2").value;

    document.getElementById("gradient").style.background="-webkit-gradient(linear, left top, left bottom, from("+color1+"), to("+color2+"))";
    document.getElementById("gradient").style.background="-webkit-linear-gradient("+color1+", "+color2+")";
    document.getElementById("gradient").style.background="-moz-linear-gradient(top, "+color1+", "+color2+")";
    document.getElementById("gradient").style.background="-ms-linear-gradient("+color1+", "+color2+")";
    document.getElementById("gradient").style.background="-o-linear-gradient("+color1+", "+color2+")";
    document.getElementById("gradient").style.background="linear-gradient("+color1+", "+color2+")";
document.getElementById("gradient").style.filter="progid:DXImageTransform.Microsoft.Alpha(startColorstr='"+color1+"', endColorstr='"+color2+"')";

    }
    </script>

    <input type="text" id="color1" onkeyup="myFunction()" value="#E9EDF6"></input>
    <input type="text" id="color2" onkeyup="myFunction()" value="#AABBDD"></input>

    <div id="gradient" style="height:500px">
        I have gradient
    </div>

この関数は Firefox と IE10 では正常に動作しますが、古いバージョンの IE では動作しません。最後のバックグラウンド呼び出しが、古い IE バージョン用の他の呼び出しを上書きするためだと思います。

それで、あなたはこれについてどうしますか？色変更関数を呼び出す前に、使用するブラウザを最初にチェックする関数を作成する必要がありますか?

4

1 に答える 1

0

すばらしいUltimate CSS Gradient Generatorをご覧になることをお勧めします。

ご覧のとおり、実行するよりも多くのコードが生成され、各行の末尾にコメントがあり、その行によって影響を受けるブラウザーが示されます。

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

具体的には、最後の行が必要で、IE6-IE9 に使用されます。

グラデーションを処理しない古いブラウザー (IE5.5...) の場合は、最初の行も含めることができます。

編集

他の行の後に、フィルター部分も JavaScript で追加します。

document.getElementById("gradient").style.filter = 
         "progid:DXImageTransform.Microsoft.Alpha(startColorstr='"+
                 color1+"', endColorstr='"+color2+"')"

そして、この回答に従って、必ずoverflow: autoオブジェクトに高さを設定するか設定してください。

編集＃2

そうです、他のプロパティで壊れます (CSS では影響しません)。

次に、IE かどうかを確認し、次の JS を使用します。

document.getElementById("gradient").filters.item("DXImageTransform.Microsoft.gradient").startColorstr = color1;
document.getElementById("gradient").filters.item("DXImageTransform.Microsoft.gradient").endColorstr = color2;
于 2013-01-22T10:45:25.797 に答える