如何動態添加使用jQuery的文本對齊風格

我試圖糾正通常的CSS錯誤周圍的CSS 2.1並需要一種方法來更改元素樣式屬性以添加自定義文本對齊樣式。如何動態添加使用jQuery的文本對齊風格

目前在jQuery的你可以這樣做

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

，但我似乎無法找到改變這種相同的方法對文本對齊的好方法。

該項目已經有一個類，我確實在該類中設置文本對齊，但沒有運氣。在定義類之後，是否可以添加文本對齊css屬性？

我有這樣的事情

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

剛過我的寬度調整後，我的螢火我看到的只有「寬度」認爲這是在樣式設置的唯一屬性。有什麼幫助嗎？

編輯：

哇 - 在這個問題上大的反響！感謝所有回覆的人！關於手頭問題的更多細節：

我正在調整jqGrid的js源代碼A3.5做一些自定義的子網格工作，我正在調整的實際JS如下所示（對於使用「this 「在我上面的例子，但我想保持這種簡單爲簡潔起見）

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

我沒有運氣試圖兩者的下方（從提供的答案）。

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

我會繼續今天在這個問題上工作，並張貼任何人都覺得我解決這個奇怪的問題疼痛的最終解決方案。

來源

2009-05-19 Toran Billups

146

你有正確的想法，因爲文檔顯示：

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

你確定你正確識別這個用class和id？

例如，如果你的類是myElementClass

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

而且，我還沒有螢火蟲在一段時間的工作，但你看DOM，而不是HTML？你的源碼不會被javascript改變，但是DOM是。在dom選項卡中查看是否應用了更改。

來源

2009-05-19 14:49:24

它應該工作，但它似乎與寬度一起使用時失敗（）被預先設定。答案是使用jQuery鏈接。 – Steerpike 2009-05-19 15:06:19

$(this).css("text-align", "center");應該工作，確保'this'是您實際嘗試設置文本對齊樣式的元素。

來源

2009-05-19 14:46:56

您也可以嘗試下面的一個內聯樣式添加到元素：

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

這應該確保其他樣式規則沒有覆蓋你以爲會工作。我相信內聯樣式通常會優先。

編輯： 此外，另一個可能會幫助你的工具是Jash（http://www.billyreisinger.com/jash/）。它給你一個JavaScript命令提示符，以便你可以確保你輕鬆地測試javascript語句，並確保你選擇了正確的元素等。

來源

2009-05-19 14:49:57 kbosak

我認爲你應該使用「textAlign」而不是「text-align」。

來源

2009-05-19 14:50:59 bperreault

只有使用香草JavaScript DOM操作設置樣式時纔會出現這種情況。 jQuery的CSS（）使用實際的CSS關鍵字。 – garrow 2009-05-19 14:59:15

如果使用`.css（{多種樣式}），這個效果很好` – 2013-06-12 01:39:44

有趣。當我編寫測試版本時，我遇到了同樣的問題。

的解決方案是使用jQuery的能力chain做：

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

有趣的發現雖然。

要擴大一點，下面確實沒有工作

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

，並不僅導致其寬度的樣式設置。正如我上面所建議的那樣，將兩者聯繫起來似乎確實奏效。

來源

2009-05-19 15:01:30 Steerpike

我通常使用

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

希望幫助

來源

2009-05-19 15:33:32 Nooshu

是正確的？

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

來源

2013-09-09 17:31:19 user2762271

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

來源

2017-03-17 05:31:08

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

可以代替這個

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

或

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

來源

2017-09-01 07:04:02 Sucharitha

-1

以下假設使用類名和ID是HTML段落標籤：

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

我們想更改jquery中的段落顏色。

的客戶端代碼將是：

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

來源

2018-02-01 11:13:45

如何動態添加使用jQuery的文本對齊風格

回答

相關問題