jQuery CSS appending with no effect

Question

$('body').append('<style type="text/css"> body {background:red;} </style>');

This doesn't make the background red. Is there away outside the .css() function to do this? I get css, html and jQuery javascript seperatly through an ajax request so how do I append it the best way?

Ok I was trying to simplify the problem but this actually works.. so heres the whole code

edit : function(page) {
    $.ajax({ 
        data    : {
            'edit' : page
        },
        success : function(i){
            var html = jQuery.parseJSON(i);

            $('#editPageListContainer, #editPreview').remove();

            var script      = document.createElement('script');
            script.type     = 'text/javascript';
            script.text     = html.js;

            document.body.appendChild(script);

            $('body').append('<style type="text.css">' + html.css + '</style>' + html.php);
        }
    }); 
}

*OMG... a typo "text.css" in the style type... love this font it's so clear to see, love you guys anyway!*

For future reference, always post the actual problematic code, not code "something like" it. Or, at least make sure your reduced code has the same problem. — thirtydot
– thirtydot, Commented Oct 24, 2011 at 9:12

Riz · Accepted Answer · 2011-10-24 08:51:13Z

4

$('body').css('background', 'red');

answered Oct 24, 2011 at 8:51

Riz

10.3k8 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Riz Over a year ago

What's reason not to use this ?

Riz Over a year ago

this should not be issue, using after loading ajax response.

Sem Over a year ago

i said OUTSIDE the .css() function.. i have a whole block of css i need to add

Riz Over a year ago

You can use {'attribute':'value', 'attribute':'value', 'attribute':'value'} in CSS function too.

Tobias Bambullis · Accepted Answer · 2011-10-24 08:57:27Z

1

Add your CSS Code to the head tag, that works for me ;o)

$("head").append("<style> body {background:red;}</style>");

For your AJAX Request it looks like:

$.ajax({
  url: "url", 
  async:false, 
  success: function(css) {
     $("head").append("<style>"+css+"</style>");
  }
});

answered Oct 24, 2011 at 8:57

Tobias Bambullis

2495 gold badges18 silver badges46 bronze badges

Comments

Bas Slagter · Accepted Answer · 2011-10-24 08:53:39Z

0

I think the best approach on this is to specify your styling in a stylesheet by specifying a class that you can use in your scripting. So....you have a css file with a class named 'myClass' and you add that class (with the addClass method) in your scripting at the moment you want. In my opinion this is the most clean approach.

answered Oct 24, 2011 at 8:53

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

Comments

adeneo · Accepted Answer · 2011-10-24 09:13:52Z

0

$('body').attr('style', 'background:red');

answered Oct 24, 2011 at 9:13

adeneo

319k29 gold badges410 silver badges392 bronze badges

Collectives™ on Stack Overflow

jQuery CSS appending with no effect

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related