I'm trying to embed css within a HTML body using jquery. css looks like
.a .a101{fill:rgb(165,0,38)}
.a .a102{fill:rgb(215,48,39)}
I've tried the following but this is not recognized:
$(".a .a101").css({
fill : 'rgb(165,0,38)'
});
$(".a .a102").css({
fill : 'rgb(215,48,39)'
});
Could you kindly advice the correct way to do it?
-Regards
First, I think you should start by reading carefully the jQuery .css() method documentation.
Then, it's actually pretty easy, you just forgot the quotation marks: .css({'fill': 'red'}).
FYI you can as easily do it in vanilla JS:
document.querySelectorAll('#idForThisExample').style.fill = 'silver';
Edit: Here is a working JS fiddle containing a function to loop through DOM elements. You will have good performances and it's good training.
Assuming you want to use the fill property (let's say you're using SVG):
$(".a .a101").css({
'fill' : 'rgb(165,0,38)'
});
Assuming you want to use a background:
$(".a .a101").css({
'background' : 'rgb(165,0,38)'
});
try .css({background:"rgb(165,0,38}), afaik css has no "fill" property
edit: seems you want to fill the container with some color, you can try:
div{
position:relative;
}
div.fill:before{
background:#f00;
content:"";
left:0;
height:100%;
top:0;
width:100%;
z-index:2;
}
then
div.addClass("fill")
<body>tag?