Comment ajouter dynamiquement un style pour le texte-align utilisant jQuery

Question

Je suis en train de corriger les bugs habituels IE autour de CSS 2.1 et ont besoin d'un moyen de modifier les propriétés d'un style éléments pour ajouter un style personnalisé text-align.

Actuellement jQuery vous pouvez faire quelque chose comme

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

mais je ne peux pas sembler trouver une bonne façon de modifier le texte rallient à cette même approche.

L'article a déjà une classe et je mets le texte aligner dans cette classe sans chance. Est-il possible d'ajouter juste après une classe est défini un attribut CSS text-align à cet élément?

J'ai quelque chose comme ça

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

juste après mon réglage de la largeur et après que je vois cela dans Firebug Je ne vois que « largeur » est la seule propriété mis sur le style. Toute aide?

EDIT:

Whoa - grande réponse à cette question! Un peu plus en détail autour du problème à portée de main:

Je suis peaufinage la source js jqGrid A3.5 pour faire une grille sous personnalisée travail et les JS réelles que je suis peaufinage est indiqué ci-dessous (désolé pour l'utilisation de « ce » dans mes exemples ci-dessus, mais je voulais garder ce simple souci de concision)

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 le ci-dessous (à partir des réponses fournies) sans chance.

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

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

Je vais continuer à travailler sur cette question aujourd'hui et poster une solution définitive pour toute personne se sentant ma douleur autour de cette question étrange.

Answer 1

Vous avez la bonne idée, que la documentation indique:

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

Êtes-vous sûr vous identifier correctement cette classe avec ou id?

Par exemple, si votre classe est myElementClass

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

En outre, je ne l'ai pas travaillé avec Firebug dans un certain temps, mais regardez-vous le Royaume et non le code html? Votre source ne change pas par javascript, mais le dom est. Regardez dans l'onglet dom et voir si le changement a été appliqué.

Answer 2

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

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

Cela devrait faire en sorte que d'autres règles de style ne prévalent pas ce que vous pensiez travailler. Je crois que les styles en ligne obtiennent généralement la priorité.

EDIT: En outre, un autre outil qui peut vous aider est Jash ( http://www.billyreisinger.com/jash/). Il vous donne une invite de commande javascript afin que vous puissiez vous assurer que le test facilement javascript déclarations et assurez-vous que vous sélectionnez l'élément à droite, etc.

Answer 3

J'utilise habituellement

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

L'espoir qui aide

Answer 4

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

Answer 5

Intéressant

. Je suis le même problème que vous quand j'ai écrit une version de test.

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

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

INTÉRESSER bien.

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

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

et les résultats de la largeur étant mis sur le style. Chaînage les deux, comme je l'ai suggéré plus haut, ne semble pas fonctionner.

Answer 6

$(this).css("text-align", "center"); devrait fonctionner, assurez-vous « ceci » est l'élément que vous êtes en train d'essayer de définir le style text-align à.

Answer 7

est correct?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>

Answer 8

<!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>

Answer 9

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

Vous pouvez utiliser le nom de classe et id en place de cette

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

ou

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

Answer 10

add_question fonction () {     comptage var = document.getElementById ( "nofquest") Valeur.     var container = document.getElementById ( "conteneur");             // précédent contenu clair du conteneur             while (container.hasChildNodes ())             {                 Container.removeChild (container.lastChild);             }             for (i = 1; i

comment définir le centre des zones de texte

Answer 11

supposons ci-dessous est la balise html paragraphe:

<p style="background-color:#ff0000">This is a paragraph.</p>

et nous voulons changer la couleur du paragraphe jquery.

Le code côté client sera:

<script>
$(document).ready(function(){
    $("p").css("background-color", "yellow");
});
</script>