代码之家 › 专栏 › 技术社区 › Toran Billups

如何使用jquery动态添加文本对齐样式

text-align css jquery

Toran Billups · 技术社区 · 16 年前

我正在尝试纠正CSS2.1周围常见的IE错误,需要一种方法来更改元素样式属性以添加自定义的文本对齐样式。

目前在jquery中,您可以执行如下操作

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

但我似乎找不到一个好方法来改变文本的对齐方式。

这个项目已经有了一个类,我在该类中设置了文本对齐,但没有运气。是否可以在定义类之后向该元素添加一个文本对齐的css属性?

我有类似的东西

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

在我的宽度调整之后,在Firebug中查看之后,我只看到“宽度”是样式上设置的唯一属性。有什么帮助吗?

编辑:

哇-对这个问题的回应很大!关于手头问题的更多细节:

我正在调整JS源 jqGrid 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');

今天我将继续研究这个问题,并为任何一个在这个奇怪的问题上感受到我痛苦的人发布一个最终的解决方案。

11 回复 | 直到 7 年前

155

Tim Hoolihan 16 年前

您有正确的想法,如文档所示:

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

你确定你用类或ID正确地识别了这个吗?

例如,如果您的类是MyElementClass

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

另外,我有一段时间没有和Firebug一起工作了,但是你在看DOM而不是HTML吗?您的源代码没有被javascript更改,但是dom是。在dom选项卡中查看是否应用了更改。

kbosak 16 年前

还可以尝试以下操作向元素添加内嵌样式:

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

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

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

Nooshu 16 年前

我通常使用

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

希望有所帮助

bperreault 16 年前

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

Steerpike 16 年前

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

解决方案是使用jquery的能力 chain 做:

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

但有趣的发现。

要展开一点,请执行以下操作不工作

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

并且只会在样式上设置宽度。正如我上面所建议的,将两者链接起来似乎确实有效。

Kumar V 11 年前

$(this).css("text-align", "center"); 如果可行,请确保“this”是您实际尝试将文本对齐样式设置为的元素。

user2762271 12 年前

是正确的吗?

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

Nikit Barochiya 8 年前

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

Ocaso Protal 8 年前

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

你可以用类名和ID来代替这个

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

或

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

kanchana 7 年前

函数add_question()。{ var count=document.getElementByID(“nofquest”).value; var container=document.getElementByID(“container”); //清除容器的以前内容 while(container.hasChildNodes()) { container.removechild(container.lastchild); } (I=1;I)

如何设置文本框的中心

-1

Liam Joshua 7 年前

假设下面是HTML段落标记:

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

我们想在jquery中更改段落颜色。

客户端代码为:

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