web-dev-qa-db-fra.com

Utilisation de! Important dans la fonction jQuery css ()

J'ai un dialogue avec une superposition déclarée comme suit:

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

La page que j'ai aura deux hauteurs de page différentes. Pour rendre compte de cela avec la superposition, je l'ai fait dans mon fichier JS:

Si petit, visible:

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

else

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

Apparemment, cela ne fonctionne pas. Existe-t-il un autre moyen de contourner !important qui le ferait?

La page peut basculer, je dois donc toujours avoir l’un ou l’autre. De plus, si je n'ajoute pas !important au fichier CSS, la superposition augmentera infiniment en hauteur (c'est sur facebook, donc je suppose qu'il existe un problème)

Aucune suggestion? 

javascriptjquerycssjquery-uijquery-dialog
36
Stanley Cup Phil

Ne pas appliquer les styles à une classe. Appliquez un cours à votre div en tant que style!

Laissez jQuery faire tout le travail pour vous

Votre feuille de style devrait avoir ces classes en eux

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

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

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

Ok c'est ton CSS trié

maintenant votre div

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

Maintenant, vous pouvez utiliser jQuery pour manipuler vos divs en les attachant à un bouton/clic/survolez ce que vous voulez utiliser.

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

Et vous n'avez pas besoin d'utiliser! Important - c'est vraiment utilisé lorsque vous commencez à avoir des problèmes avec de gros fichiers CSS ou plusieurs styles chargés.

C'est instantané mais vous pouvez aussi ajouter un effet

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

Vous pouvez ajouter des styles de manière dynamique à votre page de cette manière. Pour remplacer toutes les classes existantes par une autre, utilisez plutôt .attr ('classe', 'newClass').

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

Mais vous ne voulez pas écraser vos styles existants avec cette méthode. Cela devrait être utilisé dans un scénario "perdu". Juste démontre la puissance de jQuery

16
ppumkin

Il y a un truc pour faire ça.

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

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

cssText fait le tour ici. Il ajoute les styles css en tant que chaîne, pas en tant que variable. 

23
ghos-h

Vous pouvez essayer d'utiliser $(this).attr('style', 'height:1167px !important'); Je ne l'ai pas testé, mais cela devrait fonctionner.

11
Dan Blows

Vous pouvez créer une feuille de style dynamique avec des règles qui remplacent les propriétés souhaitées et les appliquent à la page.

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

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

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

Maintenant, lorsque vous ajoutez nos classes nouvellement créées, elles seront prioritaires car ce sont les dernières définies.

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

demo àhttp://jsfiddle.net/gaby/qvRSs/

mettre à jour

Pour le support pré-IE9

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

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

demo àhttp://jsfiddle.net/gaby/qvRSs/3/

3
Gabriele Petrioli

Sauf si j'ai mal compris votre question, ce que vous faites fonctionne dans jsfiddle . 

EDIT: Mon violon ne fonctionne que dans certains navigateurs (jusqu'à présent, Chrome: pass, IE8: échec).

2
David Ruttka

J'ai résolu ce problème comme ceci:

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

Donc, aucun style en ligne n'est perdu, le dernier remplace le premier

1
Burner

Supprimez l'attribut height de la classe, puis essayez d'implémenter votre condition if et else.

.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");

Profitez du code .... gardez le sourire ...

0
Nirav