• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] box-shadow per jquery ändern

dbarthel

dbarthel

Lounge-Member
Hallo,

ich habe mal eine Frage zu CSS in Verbindung mit Jquery.

Habe ich eine CSS-Datei mit folgender Notation:

Code: 
#header{
  margin:3px 0 0;
  background:#fff url(../images/bg-header.png) repeat-x 0 100%;
  position:relative;
  z-index:15;
 -webkit-box-shadow: 0 4px 2px 2px #394b6a; 
 box-shadow: 0 4px 2px 2px #394b6a;
}

funktionieren die Schatten.

Baue ich das selbe mit jquery:

Code: 
$('#header').css(
 'background', '#FFF url(./Main-Theme/images/bg-header.png) repeat-x 0 100%',
 'margin', '3px 0 0',
 'position', 'relative',
 'z-index', '15',
 '-webkit-box-shadow', '0 4px 2px 2px #1B3D1B',
 'box-shadow', '0 4px 2px 2px #1B3D1B' 
);

funktionieren die Schatten NICHT.

Auch so:

Code: 
$('#header).css({
'background':'#FFF url(./Main-Theme/images/bg-header.png) repeat-x 0 100%',
'margin':'3px 0 0',
'position':'relative',
'z-index':'15',
'-webkit-box-shadow':'0 4px 2px 2px #1B3D1B',
'box-shadow':'0 4px 2px 2px #1B3D1B'  
 });

wollen die Schatten ihr Farbe nicht ändern.

Was mache ich da falsch?

- - - Aktualisiert - - -

Keiner von euch Experten eine Idee, woran es liegt und vor allem, wie ich es lösen könnte?
 
Zuletzt bearbeitet:
Dann sollte das funktionieren, wenn du die Browserpräfixe weglässt. Ab Version 1.8.0 macht das jQuery automatisch:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Testseite</title>
    <style>
    #btn_1 {
        position: absolute;
        top: 10px;
        left: 280px;
    }
    
    .shadow {
        font-size: 12px;
        width: 170px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        top: 10px;
        left: 80px;
        -moz-box-shadow: 3px 3px 5px 6px #cccccc;
        -webkit-box-shadow: 3px 3px 5px 6px #cccccc;
        box-shadow: 3px 3px 5px 6px #cccccc;
    }
    </style>
    <script src="jquery-1.8.0.min.js"></script>
    <script>
    $(document).ready(function () {
        $('#btn_1').on('click', function () {
            $('#box_1').css({
                'box-shadow': '3px 3px 2px 3px #ff0000'
            });
        });
    });
    </script>
</head>

<body>
    <input id="btn_1" type="button" value="Change shadow of the box" />
    <div id="box_1" class="shadow">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua.
    </div>
</body>
</html>


Für ältere jQuery-Versionen (von 1.4.3 bis 1.7.2), kann man sich der cssHook's bedienen:
HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Testseite</title>
    <style>
    #btn_1 {
        position: absolute;
        top: 10px;
        left: 280px;
    }
    
    .shadow {
        font-size: 12px;
        width: 170px;
        height: 200px;
        border: 1px solid black;
        position: absolute;
        top: 10px;
        left: 80px;
        -moz-box-shadow: 3px 3px 5px 6px #cccccc;
        -webkit-box-shadow: 3px 3px 5px 6px #cccccc;
        box-shadow: 3px 3px 5px 6px #cccccc;
    }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
    (function ($) {
        // Analyse jQuery version string
        var jQueryVersion = $.map(jQuery.fn.jquery.split('.'), function (v){
            return v * 1;
        });

        // First, check to see if cssHooks are supported
        if (!$.cssHooks) {
            // If not, output an error message
            throw('jQuery 1.4.3+ is needed for this plugin to work');
            return;
        }

        // Second, check to see if cssHooks is needed
        if (jQueryVersion[0] > 0 && jQueryVersion[1] >= 8 && jQueryVersion[2] >= 0) {
            // If not, output an error message
            throw('jQuery 1.8.0+ automatically add browser vendor prefix');
            return;
        }

        function styleSupport(prop) {
            var vendorProp, supportedProp,
                capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
                prefixes = [ "Moz", "Webkit", "O", "ms" ],
                div = document.createElement( "div" );

            if ( prop in div.style ) {
                supportedProp = prop;
            } else {
                for ( var i = 0; i < prefixes.length; i++ ) {
                    vendorProp = prefixes[i] + capProp;
                    if ( vendorProp in div.style ) {
                        supportedProp = vendorProp;
                        break;
                    }
                }
            }

            div = null;
            $.support[prop] = supportedProp
            return supportedProp;
        }

        // check for style support of your property 
        // TODO by user: swap out myCssPropName for css property
        var myCssPropName = styleSupport("myCssPropName");

        // set cssHooks only for browsers that
        // support a vendor-prefixed border radius
        if (myCssPropName && myCssPropName !== 'myCssPropName') {
            $.cssHooks["myCssPropName"] = {
                get: function(elem, computed, extra) {
                    // handle getting the CSS property
                    return $.css(elem, myCssPropName);
                },
                set: function(elem, value) {
                    // handle setting the CSS value
                    elem.style[myCssPropName] = value;
                }
            };
        }
    }(jQuery));

    $(document).ready(function () {
        $('#btn_1').on('click', function () {
            $('#box_1').css({
                'box-shadow': '3px 3px 2px 3px #ff0000'
            });
        });
    });
    </script>
</head>

<body>
    <input id="btn_1" type="button" value="Change shadow of the box" />
    <div id="box_1" class="shadow">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua.
    </div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben