Changing CSS with jQuery

Question

I am trying to change the CSS styles in the header, but I cannot figure it out. I have scoured the internet for relevant things, & found these to be the closest: .css(), .addClass()

I generated an image using canvas, then converted it into base64 text. Now I need to stick it into the main CSS to get something like this:

<head><style>
    .icoDL{width:20px; height:20px; background-image: url("data:image/png;base64,abcdabcdabcd");}
</style></head><body>
    <div class="icoDL"></div> Link 1
    <div class="icoDL"></div> Link 2
    <div class="icoDL"></div> Link 3
</body>

However, what I am finding results in something like this:

<div class="icoDL" style="background-image: url('data:image/png;base64,abcdabcdabcd . . .
    Some link
<div class="icoDL" style="background-image: url('data:image/png;base64,abcdabcdabcd . . .
    Another link

I want it to be in the head so it does not destroy the computer's performance.

Other people have asked the same or similar questions, & I see in all of them, .css(), & .addClass(). That does not work for me though.

.CSS() just adds the style to the element like so:

From:

<!DOCTYPE html><html><head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p>Just roll the mouse over me.</p>

  <p>Or me to see a color change.</p>


<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script></body></html>

To:

<!DOCTYPE html><html><head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"/>
</head>
<body>

  <p style="color: red;">Just roll the mouse over me.</p>

  <p style="color: red;">Or me to see a color change.</p>

<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script></body></html>

.addClass() does the same thing, as far as I can tell:

From:

<!DOCTYPE html><html><head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }

    return addedClass;
  });
</script></body></html>

To:

<!DOCTYPE html><html><head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"/>
</head>
<body>

 <div>This div should be white</div>
 <div class="red green">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There is one green div</p>

<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }

    return addedClass;
  });
</script></body></html>

As far as I can tell, these functions are not what I am looking for. I feel like I am reading it wrong though.

Anyone have any suggestions?

Thanks for reading.

So am I right in thinking your question can be summarised as "How do I dynamically update a <style> block from JavaScript? I would like to add a new class that can then be used by various elements." — nnnnnn
– nnnnnn, Commented Mar 10, 2012 at 7:20
P.S. ".addClass() does the same thing, as far as I can tell" - no need to guess or experiment, .addClass() does exactly what the doco says it does, i.e., adds one or more classes to the elements in a jQuery object. I think you can safely delete your before/after examples of what .css() and .addClass() are doing and replace them with the sentence "The .css() and .addClass() functions affect individual elements, they don't let me create a new style definition." — nnnnnn
– nnnnnn, Commented Mar 10, 2012 at 7:22
Yeah that is what I was asking. Sure, I will make sure to not spam the post with examples next time. :P — Nyaarium
– Nyaarium, Commented Mar 11, 2012 at 1:07
Cool. Don't get me wrong, examples are useful, but there's such a thing as too many examples... — nnnnnn
– nnnnnn, Commented Mar 11, 2012 at 2:00
I think when I am getting confused writing the message because I cant see my message through the code, it is probably too much. :P — Nyaarium
– Nyaarium, Commented Mar 11, 2012 at 5:58

Chamika Sandamal · Accepted Answer · 2012-03-10 06:55:10Z

2

did you try something like this,

$(".icoDL").css("color","red");

answered Mar 10, 2012 at 6:55

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

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

1 Comment

Nyaarium Over a year ago

Yep, tried that. The page source view shows each element having the tag though.

alt · Accepted Answer · 2012-03-10 06:53:14Z

1

Try this:

(doesn't even use jQuery, it's straight javascript)

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "div { background: white; } p { color:blue; width:200px; font-size:14px; } ";
document.body.appendChild(css);

answered Mar 10, 2012 at 6:53

alt

14.1k21 gold badges83 silver badges124 bronze badges

Comments

kitti · Accepted Answer · 2012-03-10 06:54:57Z

0

You can directly modify stylesheets through document.styleSheets, although the method varies slightly for different browsers, and it can be a rather painful process.;)

Read more here: http://www.quirksmode.org/dom/changess.html

answered Mar 10, 2012 at 6:54

kitti

14.9k33 silver badges50 bronze badges

1 Comment

Nyaarium Over a year ago

lol painful sounds unpleasant. I may just use Jackson's suggestion.

adeneo · Accepted Answer · 2012-03-10 08:03:35Z

0

Javascript will in most cases attach inline styles, and that is what you are seeing, it's perfectly normal, and is used by just about every website there is, so there's not really anything to worry about.

There are ways to change an external stylesheet or access the style tag in the head itself, but there is no good reason to do so, except for in some very special cases.

You should also always enclose your functions in a document.ready function to make sure the elements are loaded when you attach the handlers, preferably something like this if doing inline js:

<script type="text/javascript">
  $(document).ready(function() {
      $("div").addClass(function(index, currentClass) {
          var addedClass;

          if ( currentClass === "red" ) {
             addedClass = "green";
             $("p").text("There is one green div");
          }

          return addedClass;
      });
  });
</script>

answered Mar 10, 2012 at 8:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

Nyaarium Over a year ago

So does this mean if I attach a base 64 bg-image to, say, 100 div, will it hurt performance for slower machines? Having a 100kb image inline on a bunch of tags sounds bad. BTW, I am making the page offline without the need for extra files, so I need to embed the pictures.

adeneo Over a year ago

If it's one image, you would set that to a class, and use that class for all the elements to have that BG. If it's 100 different images, then that is a bad idea in general, and especially if doing it inline with B64 which is normally not cached and will make your document so long it will hang just about any browser, depending on the size of the images of course.

Nyaarium Over a year ago

yes, so that is why I was looking to modify the head to have the bg-image, rather than inline to each element. If theres no simple jQuery way to do it, I will just use Jackson's suggestion.

Collectives™ on Stack Overflow

Changing CSS with jQuery

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

3 Comments

Related