如何动态地添加样式使用jQuery的text-align
-
22-08-2019 - |
题
我试图纠正各地CSS 2.1平常IE浏览器漏洞和需要一种方法来改变一个元素样式属性添加自定义文本对齐风格。
目前在jQuery的你可以这样做
$(this).width() or $(this).height()
但我似乎无法找到一个好办法来改变这种同样的方法文本对齐。
在项目已有一类,我设置在该类没有运气文本对齐。是否有可能只是一个文本对齐的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');
我将继续今天在这个问题上工作,并张贴任何人都觉得我的痛苦解决这个奇怪的问题的最终解决方案。
解决方案
您有正确的想法,因为文档显示:
http://docs.jquery.com/CSS/css#namevalue
您确定你正确识别这个用class和id?
例如,如果你的类是myElementClass
$('.myElementClass').css('text-align','center');
另外,我还没有与萤火虫在一段时间的工作,但你看DOM,而不是HTML?您的源不是由JavaScript的改变,但DOM是。看在DOM标签,查看是否应用了更改。
其他提示
您也可以尝试以下操作,内联样式添加到元素:
$(this).attr('style', 'text-align: center');
这应该确保其他样式规则没有覆盖你以为会工作。我相信内嵌样式通常会得到优先。
修改强> 此外,另一个工具,它可以帮助你是JASH( http://www.billyreisinger.com/jash/)。它给你一个JavaScript命令提示符下,这样可以保证你轻松地测试JavaScript语句,并确保你选择正确的元素,等等。
我通常使用
$(this).css({
"textAlign":"center",
"secondCSSProperty":"value"
});
希望帮助
我认为你应该使用“textAlign设置”,而不是“文字对齐”。
有趣。我得到了同样的问题,因为你的时候我写了一个测试版本。
的解决方案是使用jquery对链和做能力:
$(this).width(500).css("text-align", "center");
有趣的发现虽然。
要扩大了一点,下面做的不强>工作
$(this).width(500);
$(this).css("text-align", "center");
和仅在宽度结果被上样式设置。链接两个,如我上面所建议的,似乎工作。
$(this).css("text-align", "center");
应该工作,确保“这个”是你实际上是试图设置文本对齐风格的元素。
正确?
<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'});
您可以代替这种使用类名和ID
$('.classname').css({'text-align':'center'});
或
$('#id').css({'text-align':'center'});
如何设置的文本框的中心
下面假设是HTML段标记:
<p style="background-color:#ff0000">This is a paragraph.</p>
和我们想改变在jquery的段落颜色。
在客户端代码将是:
<script>
$(document).ready(function(){
$("p").css("background-color", "yellow");
});
</script>