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.
Try this:
(doesn’t even use jQuery, it’s straight javascript)