1

Is there a way to make jQuery (or any javascript) change the CSS scheme instead of just apply the style to the current elements matching the descriptor?

Suppose I have this on my css .bla{ width: 200px;}. if I run $('.bla').css('width', 300); then jQuery will only apply this to the existing elements.

What I want is a way to make the new width be the rule also for new .bla elements. To make it so that, if I keep adding .bla elements, then they will be 300 width.

Is there a way to do this?

Diogo Melo
  • 1,735
  • 3
  • 20
  • 29
  • 1
    It is possible to programmatically edit that existing rule. Alternatively, you could create a new style sheet (also programmatically) which would override that rule, e.g. via `body .bla { width: 300px }`. The [CSSOM standard](http://www.w3.org/TR/cssom/) defines APIs which provide this functionality. – Šime Vidas Dec 29 '12 at 22:26
  • How do you add new .bla elements? –  Dec 29 '12 at 22:32
  • You really should consider keeping it within the main style sheet. So, for example, a `.wide .bla {width: 300px;}` style, then add .wide to the parent. That'll keep everything together. – James S Dec 29 '12 at 22:49
  • @JamesS, it will be dynamically calculated, considering $('html').width() and recalculated on resize event. – Diogo Melo Dec 29 '12 at 23:43
  • @ŠimeVidas, it's raw html comming through a $.get call. I'm using $('#result').append() to insert it. – Diogo Melo Dec 29 '12 at 23:45

3 Answers3

2

Try this one:

var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);

This is taken from this link

Community
  • 1
  • 1
Elad
  • 426
  • 1
  • 8
  • 20
0

When you run $('.bla').css('width', 300); it is due to a condition in your page.

If you store this condition in a variable, then every time you add the new matching elements you can check to see if they need to be modified

var someCondition=false;

/* later in code*/
$('.bla').css('width', 300);
someCondition=true;

/* then when add elements*/

var newBla=$('<div class="bla">')
if( someConditon){
  newBla.css('width', 300);
}

If you did this with CSS and applied class instead you could use :

toggleClass( 'bla_300_class', someCondition); /* second arument is boolean to add or remove*/
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

You can do it like this :

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="style">
<style>.bla{ width: 200px;}</style>
</div>
<div id="divs"></div>

</div>
<button id="adddiv">Add div</button>
<button id="changeWidth">Click To Change Width</button>
<script>
$(function(){
$("#adddiv").click(function(){
$("#divs").append('<div class="bla" style="border:1px solid red;height:20px;margin:2px;">');
});
$("#changeWidth").click(function(){
$(".style").html("<style>.bla{width:300px;}</style>")
});
});
</script>
</html>

You can test the script online here JsFiddle

Anass
  • 974
  • 1
  • 6
  • 14