6

box-shadow次のように、1 つの特定の値をオーバーライドして、リスト内の他のすべての値を保持するにはどうすればよいですか。

div{

    box-shadow: 0 0 0 5px #00ff00 ,  0 0 0 10px #ff0000 ,  0 0 0 15px #0000ff ; 

}

他の値を失うことなく、2 番目の値のみをオーバーライドしたいとします。

div.with-another-shadow{

    box-shadow:       ???         ,  0 0 0 5px #abcdef ,       ???           ;  

}

1 番目と 3 番目の値もコピーして貼り付けている場合にのみ可能のようです。でなくても動作しませautoんinherit。

css だけでこれを達成することは可能ですか、それとも jQuery や JavaScript のgetComputedStyleメソッドなどを使用する必要がありますか?

これが遊び場です：http://jsfiddle.net/cherniv/uspTj/5/

PS複数の background画像リストにも関連しているようです..

4

2 に答える 2

3

これは一般的なケースの実際の解決策ではありませんが、フィドルの特定のケースを解決するためのトリックです:

div{
    box-shadow: 0 0 0 5px green,  0 0 0 10px #ff0000 ,  0 0 0 15px blue;    
    position: relative;
}

div:nth-of-type(2):after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: -5px;
    box-shadow: 0 0 0 5px yellow;    
}

デモ

2 番目の影を保持する疑似要素を作成し、マージン (負) を設定して最初の影を通過させ、描画しないようにします。

JavaScript を使用して値を変更する別のデモを次に示します。

デモ2

スクリプトは次のとおりです

function change () {
    var elem = document.getElementById("test");
    var style = window.getComputedStyle(elem);
    var boxShadow = style.boxShadow;
    var arrayBoxShadows = parseFirstComma (boxShadow);

    var newData = elem.dataset.boxshadow;
    var arrayNewData = parseFirstComma (newData);
    boxShadow = "";
    var nmax = Math.min (arrayBoxShadows.length, arrayNewData.length)
    for (var n = 0, lenR = nmax; n < lenR; n++) {
        if (n > 0) {
            boxShadow = boxShadow + ", ";
        }
        if (arrayNewData[n] == "inherit") {
            boxShadow = boxShadow + arrayBoxShadows[n];
        } else {
            boxShadow = boxShadow + arrayNewData[n];

        }
    }
    if (arrayNewData.length > nmax) {
        for (var n = nmax, lenR = arrayNewData.length; n < lenR; n++) {
            if (n > 0) {
                boxShadow = boxShadow + ", ";
            }
            boxShadow = boxShadow + arrayNewData[n];
        }
    }
    if (arrayBoxShadows.length > nmax) {
        for (var n = nmax, lenR = arrayBoxShadows.length; n < lenR; n++) {
            if (n > 0) {
                boxShadow = boxShadow + ", ";
            }
            boxShadow = boxShadow + arrayBoxShadows[n];
        }
    }


    elem.style.boxShadow = boxShadow;
}


function parseFirstComma (property) {
    var properties = new Array();
    var curr = "";
    var chr;
    var nested = "";

    for (inx = 0, len = property.length; inx < len; inx++) {
        chr = property[inx];
        if (chr == "(") nested += 1;
        if (chr == ")") nested -= 1;
        if (nested == 0 && chr == ",") {
            properties.push (curr);
            curr = "";
        } else {
            curr = curr + chr;
        }
    }
    if (curr.length > 0) {
        properties.push (curr);
    }
    return properties;
};

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37:
            change ();
            break;
    }
}

要素に適用されたボックス シャドウを取得し、データ値から目的のオーバーライドを取得します。そして、結果を再計算します (可能な値として継承を使用)。左矢印を押すと、デモがアクティブになります。

于 2013-09-09T06:44:25.107 に答える
2

現在の CSS 仕様では、複数値属性の値の 1 つをオーバーライドすることはできません。

2 番目のルールで 1 番目と 3 番目の影の定義を繰り返す必要があります。

div{
    box-shadow: 0 0 0 5px #00ff00 ,  0 0 0 10px #ff0000 ,  0 0 0 15px #0000ff ; 
}

div:nth-of-type(2){
    box-shadow: 0 0 0 5px #00ff00 ,  0 0 0 10px #abcdef ,  0 0 0 15px #0000ff ; 
}

W3 メーリング リストのこのメッセージは、 http://lists.w3.org/Archives/Public/www-style/2013Apr/0711.htmlと見なされているものであることを示唆しています。

于 2013-09-09T06:49:27.113 に答える