85

我正在尝试纠正围绕 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');

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

4

11 回答 11

171

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

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

你确定你用class或id正确地识别它吗？

例如，如果您的班级是 myElementClass

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

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

于 2009-05-19T14:49:24.680 回答
44

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

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

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

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

于 2009-05-19T14:49:57.410 回答
14

我通常使用

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

希望有帮助

于 2009-05-19T15:33:32.720 回答
2

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

于 2009-05-19T14:50:59.403 回答
2

有趣的。当我写一个测试版本时，我遇到了和你一样的问题。

解决方案是利用 jquery 的能力链和做：

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

不过有趣的发现。

为了扩展一点，以下不起作用

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

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

于 2009-05-19T15:01:30.803 回答
1

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

于 2009-05-19T14:46:56.697 回答
0

是正确的？

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
于 2013-09-09T17:31:19.987 回答
0 
<!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-17T05:31:08.963 回答
0 
 $(this).css({'text-align':'center'});

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

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

或者

$('#id').css({'text-align':'center'});
于 2017-09-01T07:04:02.933 回答
-1

假设下面是 html 段落标签：

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

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

客户端代码将是：

<script>
$(document).ready(function(){
    $("p").css("background-color", "yellow");
});
</script>
于 2018-02-01T11:13:45.847 回答
-1
函数 add_question(){ var count=document.getElementById("nofquest").value; var container = document.getElementById("container"); // 清除容器之前的内容 while (container.hasChildNodes()) { container.removeChild(container.lastChild); } for (i=1;i

如何设置文本框的中心

于 2018-04-18T04:06:11.027 回答