web-dev-qa-db-fra.com

Comment ajouter dynamiquement un style d'alignement de texte à l'aide de jQuery

J'essaie de corriger les bogues IE habituels autour de CSS 2.1 et j'ai besoin d'un moyen de modifier les propriétés de style des éléments pour ajouter un style d'alignement de texte personnalisé.

Actuellement, vous pouvez faire quelque chose comme jQuery

$(this).width() or $(this).height()

mais je n'arrive pas à trouver un bon moyen de modifier le texte avec cette même approche.

L'élément a déjà une classe et je règle le texte-aligner dans cette classe sans aucune chance. Est-il possible d'ajouter un attribut CSS text-align à cet élément après la définition d'une classe?

J'ai quelque chose comme ça 

$(this).css("text-align", "center");

juste après mon ajustement en largeur et après avoir visualisé cela dans firebug, je ne vois que "largeur" ​​est la seule propriété définie sur le style . Une aide?

MODIFIER:

Whoa - grande réponse à cette question! Un peu plus de détail sur le problème à résoudre:

Je modifie la source de js pour jqGrid A3.5 afin de réaliser un travail de sous-grille personnalisé. La modification réelle de JS que je modifie est illustrée ci-dessous (désolée d'utiliser "this" dans les exemples ci-dessus, mais je voulais garder ceci simple pour la brièveté)

var subGridJson = function(sjxml, sbid) {
    var tbl, trdiv, tddiv, result = "", i, cur, sgmap,
    dummy = document.createElement("table");
    tbl = document.createElement("tbody");
    $(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" });
    trdiv = document.createElement("tr");
    for (i = 0; i < ts.p.subGridModel[0].name.length; i++) {
        tddiv = document.createElement("th");
        tddiv.className = "ui-state-default ui-th-column";
        $(tddiv).html(ts.p.subGridModel[0].name[i]);
        $(tddiv).width(ts.p.subGridModel[0].width[i]);
        trdiv.appendChild(tddiv);
    }
    tbl.appendChild(trdiv);
}

J'ai essayé les deux éléments ci-dessous (d'après les réponses fournies) sans succès.

$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', 'text-align: center');

ET

$(tddiv).width(ts.p.subGridModel[0].width[i]).css('text-align', 'center');

Je vais continuer à travailler sur ce problème aujourd'hui et à publier une solution finale pour tous ceux qui ressentent ma douleur face à cet étrange problème.

jquerycsstext-align
79
Toran Billups

Vous avez la bonne idée, comme le montre la documentation:

http://docs.jquery.com/CSS/css#namevalue

Etes-vous sûr que vous identifiez correctement ceci avec class ou id? 

Par exemple, si votre classe est myElementClass

$('.myElementClass').css('text-align','center');

De plus, je n'ai pas travaillé avec Firebug depuis un moment, mais regardez-vous le dom et pas le html? Votre source n'est pas modifiée par javascript, mais le dom est. Regardez dans l'onglet dom et voyez si le changement a été appliqué. 

155
Tim Hoolihan

Vous pouvez également essayer ce qui suit pour ajouter un style en ligne à l’élément:

$(this).attr('style', 'text-align: center');

Cela devrait vous assurer que les autres règles de style ne vont pas au-delà de ce que vous pensiez fonctionner. Je crois que les styles en ligne ont généralement la priorité.

EDIT: Un autre outil qui pourrait vous aider est Jash ( http://www.billyreisinger.com/jash/ ). Il vous donne une invite de commande javascript afin que vous puissiez vous assurer de tester facilement les instructions javascript et de vous assurer de sélectionner le bon élément, etc.

41
kbosak

J'utilise habituellement

$(this).css({
    "textAlign":"center",
    "secondCSSProperty":"value" 
});

J'espère que cela pourra aider

11
Nooshu

Je pense que vous devriez utiliser "textAlign" au lieu de "text-align".

2
bperreault

Intéressant. J'ai le même problème que toi quand j'ai écrit une version test.

La solution consiste à utiliser la capacité de jquery à chaîner et à faire:

$(this).width(500).css("text-align", "center");

Intéressant à trouver cependant.

Pour développer un peu, ce qui suit ne fonctionne pas

$(this).width(500);
$(this).css("text-align", "center");

et n'entraîne que la largeur définie sur le style. Comme je l’ai suggéré plus haut, l’enchaînement des deux semble fonctionner.

2
Steerpike

$(this).css("text-align", "center"); devrait fonctionner, assurez-vous que "ceci" est l'élément que vous essayez réellement de définir pour le style d'alignement de texte.

1
John Boker
<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
      $this = $('h1');
         $this.css('color','#3498db');
         $this.css('text-align','center');
         $this.css('border','1px solid #ededed');
      });
    </script>

  </head>
  <body>
      <h1>Title</h1>
 </body>
</html>
0
Nikit Barochiya

Est correct?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
0
user2762271
 $(this).css({'text-align':'center'});

Vous pouvez utiliser le nom et l'id de la classe à la place de cette

$('.classname').css({'text-align':'center'});

ou

$('#id').css({'text-align':'center'});
0
Sucharitha

comment définir le centre des zones de texte

0
kanchana