Cambiar CSS con jQuery

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 ()Y .addClass (). That does not work for me though.

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

De:

<!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>

A:

<!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:

De:

<!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>

A:

<!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.

¿Alguien tiene alguna sugerencia?

Gracias por leer.

preguntado el 10 de marzo de 12 a las 06:03

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." -

PS ".addClass() does the same thing, as far as I can tell" - no need to guess or experiment, .addClass() hace exactamente lo que el doco says it does, i.e., adds one or more classes to the elementos in a jQuery object. I think you can safely delete your before/after examples of what .css() y .addClass() are doing and replace them with the sentence "The .css() y .addClass() functions affect individual elements, they don't let me create a new style definición"-

Yeah that is what I was asking. Sure, I will make sure to not spam the post with examples next time. :P -

Cool. Don't get me wrong, examples are useful, but there's such a thing as too many examples... -

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 -

4 Respuestas

did you try something like this,

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

respondido 10 mar '12, 06:03

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

Prueba esto:

(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);

respondido 10 mar '12, 06:03

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

Lee más aquí: http://www.quirksmode.org/dom/changess.html

respondido 10 mar '12, 06:03

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

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>

respondido 10 mar '12, 08:03

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. - Nyaarium

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. - adeneo

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. - Nyaarium

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.