i style <a> with background color... but when i have <img> in the link tag, the background color is visible under/near/anywhere-of the image.
so, i would like to style those links which contain images (background: none) but as css4 parent-element does not show up yet in any browser (a < img). How can i do it with javascript ?
With jquery you can do:
$('a:has(img)').css('background-color', 'transparent');
With straight up javascript I would try:
// Check not only immediate children but all descendants recursively
function hasImgChild(oElement) {
if (oElement.tagName == 'img') { return true; }
for (var n=0; n<oElement.childNodes.length; n++) {
if (hasImgChild(oElements.childNodes[n])) { return true; }
}
return false;
}
// Get all <a> tag dom references
var aLinks = document.getElementsByTagName('a');
// Loop through all <a> tags and if any of them
// Have <img> descendants, set background-color css property to 'transparent'
for (var n=0; n<aLinks.length; n++) {
if (hasImgChild(aLinks[n])) {
aLinks[n].style.backgroundColor = 'transparent';
}
}
.contains function?
.contains documentation and suggest where exactly I should use it.
$(document).ready(function(){, maybe is there another way that the colors do not appear even for a second ?$('a:not(:has(img))').css('background-color', 'yellow');With pure Javascript you can do
elements=document.getElementsByTagName("transparent");
for(var i=0;i<elements.length;i++){
el=elements[i];
if(el.contains("img")){
el.style.backgroundColor="white";
}
}
