Question

我有一个php代码，可以从MYSQL数据库打印一些HTML内容。

有时候其中有些img标签没有宽度，所以我需要找到它们并通过内联CSS向这些img标签添加width属性。

它们看起来像这样：

<img class="aligncenter size-medium wp-image-31kj" src="someimage.jpg" alt="">

<img class="alignleft large-medium wp-image-3154" src="someimage.jpg" alt="">

如何找到这些img标签并将其添加到它们中：

style="width:100%"

先谢谢了。

编辑：

已经使用jquery进行了上述操作，但不可靠：

$(".img").each(function() {  
   var imgWidth = $(this).width();
   if (imgWidth == 0){
       $(this).css('width','100%');

   }
  });

Answer 1

我会用简单的，不言自明的CSS代码做到这一点

img:not([width]) {
   width:100%;
}

仅定位不具有width属性的img标签

Answer 2

使用querySelectorAll获取具有img属性且包含class的所有wp-image元素并设置样式。

document.querySelectorAll("[class*=wp-image]").forEach(function(img) {
  img.style.width = "100%";
});

<img src="https://duckduckgo.com/favicon.ico" class="wp-image-foo">
<img src="https://google.com/favicon.ico" class="wp-image-bar">

如果要选择所有没有width属性或CSS属性的图像，请使用以下方法：

var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.style.width == "" && img.attributes.width === undefined)
    img.style.width = "100%";
}

<img src="https://duckduckgo.com/favicon.ico" class="wp-image-foo">
<img src="https://google.com/favicon.ico" class="wp-image-bar">
<img width=50 src="https://stackoverflow.com/favicon.ico" class="wp-image-bar">

获取没有width属性的img标签，并添加内联CSS属性？

2 个答案: