Como adicionar dinamicamente um estilo para text-align usando jQuery

votos
75

Eu estou tentando corrigir os erros habituais ou seja, cerca CSS 2.1 e precisa encontrar uma maneira de alterar um propriedades de estilo elementos para adicionar um estilo text-align personalizado.

Actualmente no jQuery você pode fazer algo como

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

mas eu não consigo encontrar uma boa maneira de alterar o text-align com essa mesma abordagem.

O item já tem uma classe e eu definir o text-align nessa classe sem sorte. É possível simplesmente adicionar um atributo css text-align para este elemento depois de uma classe é definida?

Eu tenho algo parecido com isto

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

atrás apenas do meu ajuste de largura e depois de eu ver isso no Firebug eu só vejo width é a única propriedade definida no estilo. Qualquer ajuda?

EDITAR:

Whoa - grande resposta sobre esta questão! Obrigado a todos que responderam! Um pouco mais detalhadamente em torno do problema em mãos:

Eu estou aprimorando a fonte js para jqGrid A3.5 fazer alguma sub trabalhos por encomenda grelha e os JS reais Estou ajustes é mostrado abaixo (sorry para usar this em meus exemplos acima, mas eu queria manter isso simples para brevidade)

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

Eu tentei tanto do abaixo (a partir das respostas fornecidas) sem sorte.

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

E

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

Vou continuar a trabalhar sobre esta questão hoje e postar uma solução final para qualquer um sentir a minha dor em torno deste problema estranho.

Publicado 19/05/2009 em 15:38
fonte usuário
Em outras línguas...                            


11 respostas

votos
147

Você tem a idéia certa, como documentação mostra:

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

Tem certeza de que está corretamente identificar isso com classe ou id?

Por exemplo, se sua classe é myElementClass

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

Além disso, eu não trabalhei com Firebug em quando, mas você está olhando para o dom e não o html? A sua fonte não é alterado por javascript, mas o dom é. Consulte o separador de dom e ver se foi aplicada a mudança.

Respondeu 19/05/2009 em 15:49
fonte usuário

votos
40

Você também pode tentar o seguinte para adicionar um estilo inline para o elemento:

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

Isso deve se certificar de que outras regras de estilo não estão substituindo o que você pensou que iria trabalhar. Eu acredito que estilos inline geralmente obter precedência.

EDIT: Além disso, outra ferramenta que pode ajudá-lo é Jash ( http://www.billyreisinger.com/jash/ ). Ele lhe dá um prompt de comando javascript para que você possa garantir que você facilmente testar javascript declarações e certifique-se que você está selecionando o elemento de direito, etc.

Respondeu 19/05/2009 em 15:49
fonte usuário

votos
10

Eu costumo usar

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

espero que ajude

Respondeu 19/05/2009 em 16:33
fonte usuário

votos
2

Interessante. Eu tenho o mesmo problema que você, quando escrevi uma versão de teste.

A solução é usar a capacidade do jQuery para cadeia e fazer:

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

Interessante encontrar embora.

Para expandir um pouco, a seguir faz não trabalhar

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

e levar apenas à largura sendo definido no estilo. Acorrentar os dois, como sugeri acima, parece funcionar.

Respondeu 19/05/2009 em 16:01
fonte usuário

votos
2

Eu acho que você deve usar "textAlign" em vez de "text-align".

Respondeu 19/05/2009 em 15:50
fonte usuário

votos
1

$(this).css("text-align", "center"); deve trabalhar, certifique-se 'isto' é o elemento que você está realmente tentando definir o estilo text-align para.

Respondeu 19/05/2009 em 15:46
fonte usuário

votos
0
função add_question () {var count = document.getElementById ( "nofquest") valor.; recipiente var = document.getElementById ( "recipiente"); // Limpar conteúdo anterior do recipiente, enquanto (container.hasChildNodes ()) {container.removeChild (container.lastChild); } Para (i = 1; i

como definir centro das caixas de texto

Respondeu 18/04/2018 em 04:06
fonte usuário

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

Você pode usar o nome e ID de classe no lugar dessa

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

ou

$('#id').css({'text-align':'center'});
Respondeu 01/09/2017 em 07:04
fonte usuário

votos
0
<!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>
Respondeu 17/03/2017 em 05:31
fonte usuário

votos
0

Está correto?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
Respondeu 09/09/2013 em 18:31
fonte usuário

votos
-1

suponha que a seguir é a tag de parágrafo HTML:

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

e nós queremos mudar a cor parágrafo em jquery.

O código do lado do cliente será:

<script>
$(document).ready(function(){
    $("p").css("background-color", "yellow");
});
</script> 
Respondeu 01/02/2018 em 11:13
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more