JQuery kullanarak metin hizalama için dinamik olarak bir stil ekleme

CSS 2.1 etrafındaki olağan IE hatalarını düzeltmeye çalışıyorum ve özel bir metin hizalama stili eklemek için öğe stili özelliklerini değiştirmenin bir yoluna ihtiyacım var.

Şu anda jQuery'de şöyle bir şey yapabilirsiniz:

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

ancak aynı yaklaşımla metin hizalamasını değiştirmenin iyi bir yolunu bulamıyorum.

Öğenin zaten bir sınıfı var ve bu sınıfta metin hizalamasını şanssız olarak ayarlıyorum. Bir sınıf tanımlandıktan sonra bu öğeye yalnızca metin hizalı CSS niteliği eklemek mümkün müdür?

Bende bunun gibi bir şey var

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

genişlik ayarımdan hemen sonra ve bunu kundakçıda görüntüledikten sonra, stil üzerinde ayarlanan tek özelliğin yalnızca "genişlik" olduğunu görüyorum. Herhangi bir yardım?

DÜZENLE:

Whoa - bu soruya büyük yanıt! Elimizdeki sorunun etrafında biraz daha ayrıntı:

Bazı özel alt ızgara çalışmaları yapmak için jqGrid A3.5 için js kaynağında ince ayar yapıyorum ve ince ayar yaptığım gerçek JS aşağıda gösteriliyor (yukarıdaki örneklerimde "bunu" kullandığım için özür dilerim, ancak bunu basit tutmak istedim kısalık)

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

Aşağıdakilerin ikisini de (verilen cevaplardan) şanssız olarak denedim.

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

VE

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

Bugün bu konu üzerinde çalışmaya devam edeceğim ve bu garip sorun etrafında acımı hisseden herkes için son bir çözüm sunacağım.

Belgelerin gösterdiği gibi doğru fikre sahipsiniz:

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

Bunu sınıf veya id ile doğru şekilde tanımladığınızdan emin misiniz?

Örneğin, sınıfınız myElementClass ise

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

Ayrıca, Firebug ile bir süredir çalışmadım ama html'ye değil doma mı bakıyorsunuz? Kaynağınız javascript tarafından değiştirilmez, ancak alan değiştirilir. Dom sekmesine bakın ve değişikliğin uygulanıp uygulanmadığına bakın.

Öğeye bir satır içi stil eklemek için aşağıdakileri de deneyebilirsiniz:

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

Bu, diğer stil kurallarının işe yarayacağını düşündüğünüz şeyi geçersiz kılmamasını sağlamalıdır. Satır içi stillerin genellikle öncelikli olduğuna inanıyorum.

DÜZENLEME: Ayrıca, size yardımcı olabilecek başka bir araç Jash'dir ( http://www.billyreisinger.com/jash/ ). Size bir javascript komut istemi verir, böylece javascript ifadelerini kolayca test ettiğinizden ve doğru öğeyi vb. Seçtiğinizden emin olabilirsiniz.

Genellikle kullanırım

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

umarım yardımcı olur

"Metin hizalama" yerine "textAlign" kullanmanız gerektiğini düşünüyorum.

İlginç. Bir test sürümü yazdığımda seninle aynı sorunu yaşadım.

Çözüm, jquery'nin zincirleme ve şunları yapma yeteneğini kullanmaktır :

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

Yine de ilginç bul.

Biraz genişletmek için şu does not iş

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

ve yalnızca stil üzerinde ayarlanan genişlikle sonuçlanır. Yukarıda önerdiğim gibi, ikisini zincirlemek işe yarıyor gibi görünüyor.

$(this).css("text-align", "center"); çalışmalıdır, metin hizalama stilini gerçekten ayarlamaya çalıştığınız öğenin 'bu' olduğundan emin olun.

Doğru?

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

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

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

Bunun yerine sınıf adını ve kimliğini kullanabilirsiniz

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

veya

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

aşağıda html paragraf etiketi olduğunu varsayalım:

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

ve jquery'de paragraf rengini değiştirmek istiyoruz.

İstemci tarafı kodu şöyle olacaktır:

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

metin kutularının merkezi nasıl ayarlanır