Alex Rivera | Logout

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

Asked 2009-05-19T14:38:20.507
87

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]).at
Edit
Report

3 Answers

44

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.

answered 2009-05-19T14:49:57.410
2

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

answered 2009-05-19T14:50:59.403
1

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

answered 2009-05-19T14:46:56.697

Your Answer