Utilisation de! Important dans la fonction css () de jQuery

Question

J'ai une boîte de 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 je dois aura deux page différentes hauteurs. Pour tenir compte de cela avec la superposition j'ai fait ça dans mon fichier JS:

Si petite soit visible:

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

d'autre

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

Apparemment, cela ne fonctionne pas. Est-il une autre façon de plus de ride !important qui serait?

La page peut basculer en arrière et en avant, donc j'ai besoin d'avoir toujours un ou de l'autre. Aussi, si je ne suis pas d'ajouter !important pour le css, alors la superposition de prendre de l'expansion en hauteur à l'infini (son facebook donc je suis en supposant qu'il existe un problème il y a)

Toutes les suggestions?

Answer 1

Il y a une astuce pour le faire.

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

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

cssText fait l'affaire ici. Il ajoute des styles CSS en tant que chaîne, pas en tant que variable.

Answer 2

Ne pas appliquer des styles à une classe. Appliquer une classe à votre div style!

Laissez jQuery faire tout le travail pour vous

Vous de la feuille de style doit avoir ces classes dans leur

.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 votre CSS triés

maintenant, votre div

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

Maintenant, vous pouvez utiliser jQuery pour manipuler votre divs, soit en l'attachant à un bouton/clic/placez ce que vous voulez utiliser

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

Et vous n'avez pas besoin de l'utiliser !important - qui est vraiment utilisé quand vous commencez à avoir des problèmes avec les gros fichiers CSS ou plusieurs chargés de styles.

C'est instantané, mais vous pouvez également ajouter un effet

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

Vous pouvez ajouter des styles dynamique à votre page comme celle - ci, et de remplacer toutes les classes existantes, avec une autre classe, nous pouvons utiliser .attr('class', 'newClass') à la place.

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

Mais vous ne voulez pas être sur la rédaction de votre styles existants à l'aide de cette méthode. Ceci doit être utilisé dans une "perte" de scénario. Juste démontre la puissance de jQuery

Answer 3

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

Answer 4

Vous pouvez créer une feuille de style dynamique avec des règles qui remplacent les propriétés que vous souhaitez et de l'appliquer sur la page.

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

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

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

Maintenant, si vous ajoutez les classes nouvellement créées, ils vont prendre en priorité car ils sont les derniers défini.

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

démonstration à l' http://jsfiddle.net/gaby/qvRSs/

---

mise à jour

Pour le pré-IE9 en charge l'utilisation

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

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

démonstration à l' http://jsfiddle.net/gaby/qvRSs/3/

Answer 5

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

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