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

Question

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

User · Answer

lt  DOCTYPE html gt   lt html gt     lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt script gt           document   ready function            this      h1              this css  color    3498db              this css  text-align   center              this css  border   1px solid  ededed                   lt  script gt      lt  head gt     lt body gt         lt h1 gt Title lt  h1 gt    lt  body gt   lt  html gt

User · Answer

suppose below is the html paragraph tag    lt p style  background-color  ff0000  gt This is a paragraph  lt  p gt    and we want to change the paragraph color in jquery   The client side code will be    lt script gt    document  ready function           p   css  background-color    yellow         lt  script gt

User · Answer

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

User · Answer

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

User · Answer

this  css  text-align    center    should work  make sure  this  is the element you re actually trying to set the text-align style to

User · Answer

I usually use    this  css        textAlign   center        secondCSSProperty   value         Hope that helps

User · Answer

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

User · Answer

Is correct    lt script gt       box    one   click   function          this   css   width      200          lt  script gt

User · Answer

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

User · Answer

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

User · Answer

I think you should use  textAlign  instead of  text-align

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

Examples related to jquery

Examples related to css

Examples related to text-align