views:

375

answers:

3

I have an inline styles in my page as :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: Inline Style Page ::</title>
<style type="text/css">
    <!--
    body
    {
        background: #fff;
        font: normal 12px Tahoma, Verdana, Arial;
        color: #636363;
    }
    #header
    {
        height: 60px;
    }
    #menu
    {
        background: #fff;
        height: 30px;
    }
    #footer
    {
        height: 50px;
        background: #fff;
    }
    -->
</style>

I need to update or add some styles to the inline styles using jquery..

I am trying to update the font, background color of the page/divs/controls using jquery. I will have my inline styles (loaded from database) for the style of my page content. My application's user can change some of the styles and update it back to the database.

Its almost like creating custom page application(asp.net mvc in c#).

How can i change the inline styles of the page using jquery? or is there any other effective way to do it?

+1  A: 

Try jQuery.Rule

Then you would do:

$.rule('body { backgound-color: #ff0000 }').appendTo('style');

to change the background-color of the body to eye burning red.

If you just want to add or override specific things you can use regular jQuery to add a style attribute to specific elements based on id/class:

// add to element with id="foo"
$('#foo').attr("style", {backgroundColor: "#ff0000"}) 
// add to ALL elements with class="bar"
$('.bar').attr("style", {backgroundColor: "#ff0000"})
beggs
Thanks beggs. i'll try this one
Prasad
Also see this question: http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply it might help.
beggs
Can we change the css inside iframe using jquery.rule?
Prasad
+1  A: 

In plain jQuery there is a .css() function, so you could just say

$("#header").css("height", "150px");

See jQuery CSS

j-g-faustus
A: 

http://docs.jquery.com/CSS

Chris