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

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

目前在 jQuery 中，您可以这样做

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

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

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

我有这样的东西

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

刚刚在我的宽度调整和后，我查看这在 Firebug 我看到只有“宽度”是唯一的属性设置的样式。 有人帮忙吗？

编辑:

哇——对这个问题的回答真是太好了! 关于手头的问题，再详细说明一下:

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

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

486081 次浏览
小开

$(this).css("text-align", "center"); should work, make sure 'this' is the element you're actually trying to set the text-align style to.

小开
最佳答案

You have the right idea, as documentation shows:

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

Are you sure you're correctly identify this with class or id?

For example, if your class is myElementClass

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

Also, I haven't worked with Firebug in a while, but are you looking at the dom and not the html? Your source isn't changed by javascript, but the dom is. Look in the dom tab and see if the change was applied.

小开

You could also try the following to add an inline style to the element:

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

This should make sure that other styling rules aren't overriding what you thought would work. I believe inline styles usually get precedence.

EDIT: Also, another tool that may help you is Jash (http://www.billyreisinger.com/jash/). It gives you a javascript command prompt so you can ensure you easily test javascript statements and make sure you're selecting the right element, etc.

小开

I think you should use "textAlign" instead of "text-align".

小开

Interesting. I got the same problem as you when I wrote a test version.

The solution is to use jquery's ability to chain and do:

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

Interesting find though.

To expand a bit, the following does not work

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

and results only in the width being set on the style. Chaining the two, as I suggested above, does seem to work.

小开

I usually use

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

Hope that helps

小开

Is correct?

<script>
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
</script>
小开 
<!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>
小开 
 $(this).css({'text-align':'center'});

You can use class name and id in place of this

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

or

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

suppose below is the html paragraph tag:

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

and we want to change the paragraph color in jquery.

The client side code will be:

<script>
$(document).ready(function(){
$("p").css("background-color", "yellow");
});
</script>
小开
function add_question(){ var count=document.getElementById("nofquest").value; var container = document.getElementById("container"); // Clear previous contents of the container while (container.hasChildNodes()) { container.removeChild(container.lastChild); } for (i=1;i

how to set center of the textboxes


提交答案