如何使用 jQuery 为文本对齐动态添加样式答案

【问题标题】：How to dynamically add a style for text-align using jQuery如何使用 jQuery 为文本对齐动态添加样式
【发布时间】：2010-10-27 08:37:06
【问题描述】：

我正在尝试纠正围绕 CSS 2.1 的常见 IE 错误，并且需要一种方法来更改元素样式属性以添加自定义文本对齐样式。

目前在 jQuery 中你可以做类似的事情

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

但我似乎找不到用同样的方法更改文本对齐的好方法。

该项目已经有一个类，我在该类中设置了文本对齐，但没有运气。是否可以在定义类后只向该元素添加 text-align CSS 属性？

我有这样的事情

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

在我调整宽度之后，在我在萤火虫中查看这个之后，我看到只有“宽度”是样式上唯一设置的属性。有什么帮助吗？

编辑：

哇 - 对这个问题的强烈回应！关于手头问题的更多细节：

我正在调整 jqGrid A3.5 的 js 源代码以执行一些自定义子网格工作，我正在调整的实际 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');

我今天将继续处理这个问题，并为任何对这个奇怪问题感到痛苦的人发布最终解决方案。

【问题讨论】：

标签： jquery css text-align

【解决方案1】：

功能添加问题（）{ var count=document.getElementById("nofquest").value; var container = document.getElementById("container"); // 清除容器之前的内容 while (container.hasChildNodes()) { container.removeChild(container.lastChild); } 对于 (i=1;i

如何设置文本框的中心

【讨论】：

1.格式 2. 你能解释一下吗？

【解决方案2】：

假设下面是html段落标签：

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

我们想改变 jquery 中的段落颜色。

客户端代码将是：

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

【讨论】：

这会以任何方式改善给定的答案吗？

【解决方案3】：

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

您可以使用类名和 id 代替它

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

或

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

$(this).css("text-align", "center"); 应该可以工作，确保 'this' 是您实际尝试设置 text-align 样式的元素。

【讨论】：

【解决方案6】：

对吗？

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

【讨论】：

【解决方案7】：

我经常用

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

希望有帮助

【讨论】：

【解决方案8】：

有趣。我写测试版的时候遇到了和你一样的问题。

解决办法是利用jquery的能力chain做：

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

有趣的发现。

为了扩展一点，以下不工作

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

并且只导致样式上设置的宽度。正如我上面建议的那样，将两者链接起来似乎确实有效。

【讨论】：

【解决方案9】：

我认为你应该使用“textAlign”而不是“text-align”。

【讨论】：

只有在使用 vanilla javascript DOM 操作设置样式时才会出现这种情况。 jQuery css() 使用实际的 css 关键字。

【解决方案10】：

您还可以尝试以下方法为元素添加内联样式：

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

这应该确保其他样式规则不会覆盖您认为可行的规则。我相信内联样式通常优先。

编辑： 此外，另一个可以帮助您的工具是 Jash (http://www.billyreisinger.com/jash/)。它为您提供了一个 javascript 命令提示符，因此您可以确保轻松测试 javascript 语句并确保您选择了正确的元素等。

【讨论】：

【解决方案11】：

如文档所示，您的想法是正确的：

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

您确定您正确地用类或 id 识别它吗？

例如，如果你的类是 myElementClass

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

另外，我有一段时间没有使用 Firebug，但是您查看的是 dom 而不是 html？ javascript 不会更改您的源代码，但 dom 会更改。查看 dom 选项卡，看看是否应用了更改。

【讨论】：

它应该可以工作，但与之前设置的 width() 结合使用时似乎会失败。答案是使用 jquery 链接。