如何动态添加使用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的文本对齐风格

回答

相关问题