How to dynamically add a style for text-align using jQuery

Jquery Problem Overview

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.

Currently in jQuery you can do something like

$(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?

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 jqGrid A3.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)

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.

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

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.

Solution 3 - Jquery

I usually use

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

Hope that helps

Solution 4 - Jquery

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

Solution 5 - Jquery

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.

Solution 6 - Jquery

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

Solution 7 - Jquery

Is correct?

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

Solution 8 - Jquery

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

Solution 9 - Jquery

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

You can use class name and id in place of this

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

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

Solution 10 - Jquery

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>

Solution 11 - Jquery

how to set center of the textboxes

Content Type	Original Author	Original Content on Stackoverflow
Question	Toran Billups	View Question on Stackoverflow
Solution 1 - Jquery	Tim Hoolihan	View Answer on Stackoverflow
Solution 2 - Jquery	kbosak	View Answer on Stackoverflow
Solution 3 - Jquery	Nooshu	View Answer on Stackoverflow
Solution 4 - Jquery	bperreault	View Answer on Stackoverflow
Solution 5 - Jquery	Steerpike	View Answer on Stackoverflow
Solution 6 - Jquery	John Boker	View Answer on Stackoverflow
Solution 7 - Jquery	user2762271	View Answer on Stackoverflow
Solution 8 - Jquery	Nikit Barochiya	View Answer on Stackoverflow
Solution 9 - Jquery	SNG	View Answer on Stackoverflow
Solution 10 - Jquery	Siddharam Padamgond	View Answer on Stackoverflow
Solution 11 - Jquery	kanchana	View Answer on Stackoverflow