I want to set the color of "val" in the link in below code.
var link = $('<a href="#" class="album">' + val + '</a><br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
Add a comment
|
5 Answers
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend('<a href="#" class="album">'+val+'</a><br><br>');
$(".parent_element > a:first").css({ color: 'red' });
1 Comment
Scalpweb
You're welcome. Just so you know, you can also animate the css changes: link.animate({ color: red }, 1000); Doing that, the code will go from default color to red in 1 second.
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
3 Comments
Scott Sauyet
So you make it an element (via
[0]) and then call the jQuery method on the DOM element? Nope... Your second approach should work.Scott Sauyet
Sort of. But what reason is there to use
$(link[0]) when link will do the same job? The correct fix, IMHO, would be to use your second approach alongside link[0].style.color ='red';
kamituel
@ScottSauyet -
link.css(...) is not equivalent - it'll apply style to both <br> elements as well.If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise, JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
Comments
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('<a href="#" class="album">' + val + '</a>');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
Comments
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.
