仅适用于img的填充

Question

我有一个脚本，允许根据此处的网址显示图标：JsBin

我在CSS中为img设置了一个填充权限。问题是第二个url（nu.nl）也获得了css padding right，而没有favicon img。如何设置css或更改脚本以便我的img样式只会影响img而不影响其他url？

Answer 1

您必须制作一些类或ID才能定位特定图像，  因为现在所有图像标记都应用了右边的填充。

.Myimages(images which have padding-right)
{
  padding-right:10px;
}

现在在任何地方使用此类，填充权限为：10px

我不确定，但这可行，请检查

 var faviconIMG    = jQuery('<img src="' + '" alt="" class="Myimages"/>')[config.insert](link);

现在它适用于所有图片代码，因为您已在img上应用了填充，这将影响所有带有img的代码。

Answer 2

我认为你可以像这样将宽度设置为imgs。并且您可以使用保证金来显示图像。

img {margin-right: 10px;width:16px;height:16px;}

如果没有图像，则会有一个空白方块。

编辑：

如果没有图像，则不会使用jsvascirpt显示图像。 我添加了以下几行：

extImg.onerror = function(){
    faviconIMG.css({'display':'none'});
    console.log("error --------------");
};

http://jsbin.com/udukut/9/edit

Answer 3

你可以给图像一个类

<style>
   .foo {padding-right: 10px}
</style>

<img src="/link/to/img.jpg" class="foo" />

Answer 4

将IMG元素插入到load事件的链接中，而不是将IMG元素插入到所有链接中，无论是否实际加载了favicon。

Answer 5

也许使用jQuery来处理已经创建它们的破碎图像？额外的管理费用，但工作正常。

$("img").error(function(){ $(this).attr('style','padding: 0px;'); });