webentwicklung-frage-antwort-db.com.de

Verwendung von! Important in jQuery css () - Funktion

Ich habe einen Dialog mit einem Overlay wie folgt:

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

Die Seite, die ich habe, hat zwei unterschiedliche Seitenhöhen. Um dies mit dem Overlay zu berücksichtigen, habe ich dies in meiner JS-Datei gemacht:

Wenn klein sichtbar:

$('.ui-widget-overlay').css("height", "985px !important");

else

$('.ui-widget-overlay').css("height", "1167px !important");

Anscheinend funktioniert das nicht. Gibt es eine andere Möglichkeit, !important zu überfahren?

Die Seite kann hin und her wechseln, also muss ich immer das eine oder das andere haben. Auch wenn ich !important nicht zum CSS hinzufüge, wird die Überlagerung unendlich groß (in Facebook, also gehe ich davon aus, dass es dort ein Problem gibt).

Irgendwelche Vorschläge? 

javascriptjquerycssjquery-uijquery-dialog
36
Stanley Cup Phil

Wenden Sie keine Stile auf eine Klasse an. Wende eine Klasse auf deinen Div als Stil an!

Lassen Sie jQuery die ganze Arbeit für Sie erledigen

In Ihrem Stylesheet sollten diese Klassen enthalten sein

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

.ui-widget-small { height: 985px;  }

.ui-widget-full { height: 1167px; }

Ok das ist dein CSS sortiert

jetzt dein div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

Jetzt können Sie jQuery verwenden, um Ihre Divs zu bearbeiten, indem Sie sie einem Button/Click/Hover hinzufügen, je nachdem, was Sie verwenden möchten

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')

Sie müssen nicht unbedingt! Important verwenden - das wird wirklich verwendet, wenn Sie Probleme mit großen CSS-Dateien oder mehreren geladenen Stilen haben.

Dies ist sofort möglich, Sie können jedoch auch einen Effekt hinzufügen

$('#myWidget').hide('slow', function(){ $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow') }  )

Sie können Ihrer Seite auf diese Weise Stile dynamisch hinzufügen. Um alle vorhandenen Klassen durch eine andere Klasse zu ersetzen, können Sie stattdessen .attr ('class', 'newClass') verwenden.

$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')

Sie möchten jedoch nicht Ihre vorhandenen Stile mit dieser Methode überschreiben. Dies sollte in einem "verlorenen" Szenario verwendet werden. Demonstriert nur die Leistungsfähigkeit von jQuery

16
ppumkin

Dafür gibt es einen Trick.

$('.ui-widget-overlay').css('cssText', 'height:985px !important;');

$('.ui-widget-overlay').css('cssText', 'height:1167px !important;');

cssText macht hier den Trick. Es hängt CSS-Stile als Zeichenfolge an, nicht als Variable. 

23
ghos-h

Sie könnten es mit $(this).attr('style', 'height:1167px !important'); versuchen. Ich habe es nicht getestet, aber es sollte funktionieren.

11
Dan Blows

Sie können ein dynamisches Stylesheet mit Regeln erstellen, die die gewünschten Eigenschaften überschreiben und auf die Seite anwenden.

var $stylesheet = $('<style type="text/css" media="screen" />');

$stylesheet.html('.tall{height:1167px !important;} .short{height:985px !important}');

$('body').append($stylesheet);

Wenn Sie jetzt unsere neu erstellten Klassen hinzufügen, haben sie Vorrang, da sie die zuletzt definierten sind.

$('.ui-widget-overlay').addClass('tall');

Demo unterhttp://jsfiddle.net/gaby/qvRSs/

update

Verwenden Sie für die Unterstützung vor IE9

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tall{height:300px !important;}\
                    .short{height:100px !important}\
                    </style>');

$('body').append($stylesheet);

Demo unterhttp://jsfiddle.net/gaby/qvRSs/3/

3
Gabriele Petrioli

Wenn Sie Ihre Frage nicht richtig verstanden haben, arbeiten Sie mit funktioniert in jsfiddle . 

EDIT: Meine Geige funktioniert nur in einigen Browsern (bisher Chrome: pass, IE8: Fail).

2
David Ruttka

Ich habe dieses Problem so gelöst:

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

So geht kein Inline-Style verloren und der letzte überschreibt den ersten

1
Burner

Bitte entfernen Sie das height-Attribut aus der Klasse und versuchen Sie dann, Ihre if- und else-Bedingung zu implementieren.

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

if
     $('.ui-widget-overlay').attr("height", "985px");
else
     $('.ui-widget-overlay').attr("height", "1167px");

Code genießen ... weiter lächeln ...

0
Nirav