Cách thêm động một kiểu cho text-align bằng jQuery

Tôi đang cố gắng sửa các lỗi IE thông thường xung quanh CSS 2.1 và cần một cách để thay đổi thuộc tính kiểu phần tử để thêm kiểu căn chỉnh văn bản tùy chỉnh.

Hiện tại trong jQuery, bạn có thể làm điều gì đó như

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

nhưng tôi dường như không thể tìm ra cách tốt để thay đổi căn chỉnh văn bản với cùng một cách tiếp cận này.

Mục đã có một lớp và tôi không may mắn đặt căn chỉnh văn bản trong lớp đó. Có thể chỉ thêm một thuộc tính CSS căn chỉnh văn bản vào phần tử này sau khi một lớp được xác định không?

Tôi có một cái gì đó như thế này

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

ngay sau khi điều chỉnh chiều rộng của tôi và sau khi tôi xem điều này trong firebug, tôi chỉ thấy "chiều rộng" là thuộc tính duy nhất được đặt trên kiểu. Bất kỳ giúp đỡ?

BIÊN TẬP:

Chà - câu trả lời lớn cho câu hỏi này! Chi tiết hơn một chút về vấn đề đang xảy ra:

Tôi đang điều chỉnh nguồn js cho jqGrid A3.5 để thực hiện một số công việc lưới phụ tùy chỉnh và JS thực tế mà tôi đang điều chỉnh được hiển thị bên dưới (xin lỗi vì đã sử dụng "this" trong các ví dụ của tôi ở trên, nhưng tôi muốn giữ điều này đơn giản cho ngắn gọn)

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

Tôi đã thử cả hai cách dưới đây (từ các câu trả lời được cung cấp) nhưng không may mắn.

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

VÀ

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

Tôi sẽ tiếp tục làm việc về vấn đề này ngày hôm nay và đăng giải pháp cuối cùng cho bất kỳ ai cảm thấy đau đớn của tôi xung quanh vấn đề kỳ lạ này.

Bạn có ý tưởng đúng, như tài liệu cho thấy:

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

Bạn có chắc chắn rằng bạn xác định chính xác điều này với lớp hoặc id?

Ví dụ: nếu lớp của bạn là myElementClass

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

Ngoài ra, tôi đã không làm việc với Firebug trong một thời gian, nhưng bạn đang nhìn vào dom chứ không phải html? Nguồn của bạn không bị thay đổi bởi javascript, nhưng dom thì có. Nhìn vào tab dom và xem liệu thay đổi có được áp dụng hay không.

Bạn cũng có thể thử những cách sau để thêm kiểu nội tuyến vào phần tử:

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

Điều này sẽ đảm bảo rằng các quy tắc tạo kiểu khác không ghi đè lên những gì bạn nghĩ sẽ hiệu quả. Tôi tin rằng kiểu nội tuyến thường được ưu tiên.

CHỈNH SỬA: Ngoài ra, một công cụ khác có thể giúp bạn là Jash ( http://www.billyreisinger.com/jash/ ). Nó cung cấp cho bạn dấu nhắc lệnh javascript để bạn có thể đảm bảo bạn dễ dàng kiểm tra các câu lệnh javascript và đảm bảo rằng bạn đang chọn đúng phần tử, v.v.

Tôi thường sử dụng

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

Hy vọng điều đó sẽ giúp

Tôi nghĩ bạn nên sử dụng "textAlign" thay vì "text-align".

Hấp dẫn. Tôi gặp vấn đề tương tự như bạn khi tôi viết một phiên bản thử nghiệm.

Giải pháp là sử dụng khả năng chuỗi và thực hiện của jquery :

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

Tuy nhiên, tìm thấy thú vị.

Để mở rộng một chút, cách sau không hoạt động

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

và chỉ dẫn đến chiều rộng được đặt trên kiểu. Chuỗi hai, như tôi đã đề xuất ở trên, dường như hoạt động.

$(this).css("text-align", "center"); sẽ hoạt động, hãy đảm bảo 'đây' là phần tử mà bạn thực sự đang cố gắng đặt kiểu căn chỉnh văn bản thành.

Đúng?

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

Bạn có thể sử dụng tên lớp và id thay cho tên này

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

hoặc là

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

giả sử bên dưới là thẻ đoạn html:

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

và chúng tôi muốn thay đổi màu đoạn văn trong jquery.

Mã phía máy khách sẽ là:

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

cách đặt tâm của các hộp văn bản