Câu hỏi Cách tự động thêm kiểu cho căn chỉnh văn bản bằng cách sử dụng jQuery


Tôi đang cố 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 các 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 một cái 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 văn bản căn chỉnh với cách tiếp cận tương tự này.

Mục đã có một lớp và tôi đặt văn bản căn chỉnh trong lớp đó mà không có may mắn. Có thể thêm một thuộc tính CSS text-align vào phần tử này sau khi một lớp được định nghĩa 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 thấy chỉ "chiều rộng" là thuộc tính duy nhất được đặt trên kiểu. Bất kỳ giúp đỡ?

CHỈNH SỬA:

Whoa - phản hồi lớn cho câu hỏi này! Chi tiết hơn một chút xung quanh vấn đề trong tầm tay:

Tôi đang tinh chỉnh nguồn js cho jqGrid A3.5 để làm một số công việc lưới phụ tùy chỉnh và JS thực tế tôi đang tinh chỉnh được hiển thị bên dưới (xin lỗi vì sử dụng "điều này" trong 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 bên dưới (từ các câu trả lời được cung cấp) mà không có may mắn.

$(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');

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


76
2018-05-19 14:38


gốc




Các câu trả lời:


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 đang 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 và không phải là html? Nguồn của bạn không bị thay đổi bởi javascript, nhưng dom là. Tìm trong tab dom và xem liệu thay đổi đã được áp dụng chưa.


147
2018-05-19 14:49



Nó sẽ làm việc, nhưng nó có vẻ thất bại khi được sử dụng kết hợp với width () được thiết lập trước đó. Câu trả lời là sử dụng chuỗi jquery. - Steerpike


Bạn cũng có thể thử 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 nên đảm bảo rằng các quy tắc tạo kiểu tóc khác không ghi đè những gì bạn nghĩ sẽ hoạt động. Tôi tin rằng phong cách 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 một 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.


41
2018-05-19 14:49





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

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

Hy vọng rằng sẽ giúp


11
2018-05-19 15:33





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


2
2018-05-19 14:50



Điều này sẽ chỉ là trường hợp nếu thiết lập phong cách bằng cách sử dụng thao tác vani javascript DOM. jQuery css () sử dụng các từ khóa css thực tế thay thế. - garrow
Điều này hoạt động tuyệt vời nếu sử dụng .css({multiple-styles}) - Cody Guldner


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 của jquery để chuỗi và làm:

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

Thú vị tìm thấy mặc dù.

Để mở rộng một chút, những điều sau đây không không phải công việc

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

và kết quả chỉ trong chiều rộng được đặt trên kiểu. Chaining hai, như tôi đã đề xuất ở trên, dường như làm việc.


2
2018-05-19 15:01





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


1
2018-05-19 14:46





Đúng?

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

0
2017-09-09 17:31





<!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
2018-03-17 05:31