Изменение CSS с помощью jQuery

Я пытаюсь изменить стили CSS в заголовке, но я не могу понять это. Я искал интернет для релевантных вещей, & нашел, что они наиболее близки: .css(), .addClass()Изменение CSS с помощью jQuery

Я сгенерировал изображение, используя холст, а затем преобразовал его в текст base64. Теперь мне нужно, чтобы вставить его в основной CSS, чтобы получить что-то вроде этого:

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

Однако то, что я найти результаты в чем-то вроде этого:

<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

Я хочу, чтобы это было в голове поэтому он не разрушает производительность компьютера.

Другие люди задавали те же или аналогичные вопросы, & я вижу во всех из них, .css(), & .addClass(). Это не работает для меня.

.CSS() просто добавляет стиль к элементу так:

От:

<!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() делает то же самое, как и насколько я могу судить:

От:

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

Насколько я могу судить, эти функции не то, что я ищу. Я чувствую, что я читаю это неправильно.

У кого-нибудь есть предложения?

Спасибо за чтение.

источник

2012-03-10 RandomClown

Так я прав в думая, что ваш вопрос можно суммировать как «Как я динамически обновляю блок«