ansaurus

Question

jquery create css rule / class @ runtime

Answer 1

+1 A:

Maybe you can put the style information in a separate class in your css file, e.g.:

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

and then use jQuery at the point of your choosing to add this classname to the element?

JorenB 2009-07-31 13:28:10

i want no extern css file!

stephan 2009-07-31 13:36:55

and you don't want to put the information in the head section of your page either (between style tags)?

JorenB 2009-07-31 13:45:18

Answer 2

A:

You could just make a css class called something like .fixed-object that has all your css in it...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

Then in jquery anytime you want something to have that style just add that class to it...

$(#my-window).addClass('fixed-object');

That seems like the easiest way to do it, unless I'm misunderstanding what you need done.

Sir David of Lee 2009-07-31 13:28:33

i want no extern css file!

stephan 2009-07-31 13:38:05

Answer 3

+3 A:

What if you dynamically wrote a < script > section on your page (with your dynamic rules) and then used jQuerys .addClass( class ) to add those dynamically created rules?

I have not tried this, just offering a theory that might work.

Bryan Denny 2009-07-31 13:29:47

seams teh best way right now. i've found something jQuery.cssRule but is some kind of plugin :-/

stephan 2009-07-31 13:39:08

$("head").append($("<style type='text/css'> ... is one way

stephan 2009-07-31 13:46:00

Answer 4

+1 A:

Bit of a lazy answer this, but the following article may help: http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Also, try typing "modify css rules" into google

Not sure whatwould happen if you tried to wrap a document.styleSheets[0] with jQuery() though you could give it a try

James Wiseman 2009-07-31 13:30:03

Answer 5

+3 A:

you can apply css an an object. So you can define your object in your javascript like this:

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

And then simply apply it to all the elements you want

$("#myelement").css(my_css_class);

So it is reusable. What purpose would you do this for though?

yuval 2009-07-31 18:52:29

Answer 6

+3 A:

If you don't want to hardcode the CSS into a CSS block/file, you can use jQuery to dynamically add CSS to HTML Elements, ID's, and Classes.

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

Mike Trpcic 2009-07-31 18:58:57

Answer 7

+11 A:

You can create style element and insert it into DOM

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

tested on Opera10 FF3.5 iE8 iE6

Taras Bulba 2010-01-16 05:54:11

This did not work for me in IE8, FF3.6 or Chrome. No console errors, just no effect. Add my solution below.

Robert Gowland 2010-10-22 20:11:59

Answer 8

A:

With jQuery.Rule you can write code like this to append a new CSS rule:

$.rule('#content ul{ border:1px solid green }').appendTo('style');

Extending a rule:

$.rule('#content ul', 'style').append('background:#FF9');

Removing the whole rule:

$.rule('#content ul', 'style').remove();

There is more in the API docs.

andras 2010-08-08 18:53:45

Answer 9

A:

I have been messing with some of this recently and i have used two different approaches when programming an iPhone / iPod site.

The first way I came across when looking for orientation changes so you can see whether the phone is portrait or landscape, this is a very static way but simple and clever:

In CSS : `#content_right,

content_normal{

display:none; }`

In JS File: ` function updateOrientation(){ var contentType = "show_"; switch(window.orientation){ case 0: contentType += "normal"; break;

case -90: contentType += "right"; break; document.getElementById("page_wrapper").setAttribute("class",contentType); }`

In PHP/HTML (Import your JS file first then in body tag): <body onorientationchange="updateOrientation();">

This basically chooses a different pre set CSS block to run depending on the result given back from the JS file.

Also the more dynamic way which I preferred was a very simple addition to a script tag or your JS file: document.getelementbyid(id).style.backgroundColor = '#ffffff';

This works for most browsers but for IE it's best to take away it's ammunition with something tighter: var yourID = document.getelementbyid(id); if(yourID.currentstyle) { yourID.style.backgroundColor = "#ffffff"; // for ie :@ } else { yourID.style.setProperty("background-color", "#ffffff"); // everything else :) }

Or you can use getElementByClass() and change a range of items.

Hope this helps!

Ash.

Ash 2010-08-08 19:11:42

Answer 10

+1 A:

if you don' t want to assign a display:none to a css class, the right approach in to append to style, jQuery.Rule do the job.

I some cases you want to apply stiles before the append event of ajax content and fade content after append and this is it!

Mattia 2010-10-19 10:20:31

Answer 11

+1 A:

The most popular answer so far, using appendTo("head") did not work for me in IE8, FF3.6, or Chrome. I had to end up using a the cssRule plug-in. The code was simple then:

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

One of the comments so far asked why one would want to do such a thing. For example, creating styles for a list where each item needs a distinct background colour (eg. GCal's list of calendars) where the number of columns is not known until run time.

Robert Gowland 2010-10-22 20:10:29

ansaurus

tags:

views:

answers:

jquery create css rule / class @ runtime

content_normal{

related questions