如何使用 jQuery 动态添加文本对齐样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/883180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically add a style for text-align using jQuery
提问by Toran Billups
I'm trying to correct the usual IE bugs around CSS 2.1 and need a way to alter an elements style properties to add a custom text-align style.
我正在尝试纠正围绕 CSS 2.1 的常见 IE 错误，并且需要一种方法来更改元素样式属性以添加自定义文本对齐样式。
Currently in jQuery you can do something like
目前在 jQuery 中，您可以执行以下操作
$(this).width() or $(this).height()
but I can't seem to find a good way to alter the text-align with this same approach.
但我似乎无法找到一种使用相同方法更改文本对齐的好方法。
The item already has a class and I set the text-align in that class with no luck. Is it possible to just add a text-align CSS attribute to this element after a class is defined?
该项目已经有一个类，我在该类中设置了 text-align ，但没有运气。是否可以在定义类后向该元素添加 text-align CSS 属性？
I have something like this
我有这样的事情
$(this).css("text-align", "center");
just after my width adjustment and after I view this in firebug I see only "width" is the only property set on the style. Any help?
就在我的宽度调整之后，在我在萤火虫中查看之后，我看到只有“宽度”是样式上设置的唯一属性。有什么帮助吗？
EDIT:
编辑：
Whoa - big response to this question! A bit more detail around the problem at hand:
哇 - 对这个问题的大回应！关于手头问题的更多细节：
I'm tweaking the js source for jqGridA3.5 to do some custom sub grid work and the actual JS I'm tweaking is shown below (sorry for using "this" in my examples above, but I wanted to keep this simple for brevity)
我正在调整jqGridA3.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);
}
I've tried both of the below (from the answers provided) with no luck.
我已经尝试了以下两种方法（从提供的答案中）但没有运气。
$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', 'text-align: center');
AND
和
$(tddiv).width(ts.p.subGridModel[0].width[i]).css('text-align', 'center');
I will continue to work on this issue today and post a final solution for anyone feeling my pain around this strange issue.
今天我将继续研究这个问题，并为任何对这个奇怪问题感到痛苦的人发布最终解决方案。
回答by Tim Hoolihan
You have the right idea, as documentation shows:
您的想法是正确的，如文档所示：
http://docs.jquery.com/CSS/css#namevalue
http://docs.jquery.com/CSS/css#namevalue
Are you sure you're correctly identify this with class or id?
你确定你用 class 或 id 正确识别了吗？
For example, if your class is myElementClass
例如，如果您的类是 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.
另外，我有一段时间没有使用 Firebug，但是你在看 dom 而不是 html？你的源代码没有被 javascript 改变，但是 dom 是。查看 dom 选项卡，看看是否应用了更改。
回答by kbosak
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.
编辑：另外，另一个可以帮助你的工具是 Jash ( http://www.billyreisinger.com/jash/)。它为您提供了一个 javascript 命令提示符，因此您可以确保轻松测试 javascript 语句并确保您选择了正确的元素等。
回答by Nooshu
I usually use
我通常使用
$(this).css({
"textAlign":"center",
"secondCSSProperty":"value"
});
Hope that helps
希望有帮助
回答by bperreault
I think you should use "textAlign" instead of "text-align".
我认为你应该使用“textAlign”而不是“text-align”。
回答by Steerpike
Interesting. I got the same problem as you when I wrote a test version.
有趣的。我在写测试版时遇到了和你一样的问题。
The solution is to use jquery's ability to chainand do:
解决方案是使用 jquery 的链接功能并执行以下操作：
$(this).width(500).css("text-align", "center");
Interesting find though.
有趣的发现。
To expand a bit, the following does notwork
为了扩大一点，下面确实没有工作
$(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.
并仅导致在样式上设置宽度。正如我上面建议的那样，将两者链接起来似乎确实有效。
回答by John Boker
$(this).css("text-align", "center");should work, make sure 'this' is the element you're actually trying to set the text-align style to.
$(this).css("text-align", "center");应该有效，请确保“this”是您实际尝试将文本对齐样式设置为的元素。
回答by user2762271
Is correct?
是正确的？
<script>
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
</script>
回答by Nikit Barochiya
<!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>
回答by SNG
$(this).css({'text-align':'center'});
You can use class name and id in place of this
您可以使用类名和 id 代替此
$('.classname').css({'text-align':'center'});
or
或者
$('#id').css({'text-align':'center'});
回答by Siddharam Padamgond
suppose below is the html paragraph tag:
假设下面是 html 段落标签：
<p style="background-color:#ff0000">This is a paragraph.</p>
and we want to change the paragraph color in jquery.
我们想在 jquery 中更改段落颜色。
The client side code will be:
客户端代码将是：
<script>
$(document).ready(function(){
$("p").css("background-color", "yellow");
});
</script>
