Question

我们说我有以下任何一种情况：

<img src="image001.jpg">
<img src="../image001.jpg">
<img src="http://localhost/image001.jpg">

使用JavaScript（没有jQuery，请不要使用CSS），是否可以在<img>标记之外设置相关图像的样式。

例如，如果我有一个网站并使用Google Chrome Inspect＆gt;控制台，我可以在图片上设置样式吗？类似的东西：

var images = document.querySelectorAll("img");

for(var i = 0;i < images.length;i++){
  var image = images[i].src;
  if (image.indexOf('mystring') !== -1) {
  console.log(image);

}

Answer 1

使用JavaScript（不是jQuery或CSS），是否可以设置样式图像[...]？

是的，绝对：

＆＃13;

var images = document.getElementsByTagName('img');

images[0].style.backgroundColor = 'rgb(255,0,0)';
images[1].style.backgroundColor = 'rgb(255,255,0)';
images[2].style.backgroundColor = 'rgb(0,0,255)';

for (var i = 0; i < images.length; i++) {
    images[i].style.width = '100px';
    images[i].style.height = '100px';
}

＆＃13;

<img src="image001.jpg">
<img src="../image001.jpg">
<img src="http://localhost/image001.jpg">

＆＃13;

Answer 2

如果我理解你的话......

如果要在图像上建立初始属性，可以为图像指定样式，或创建要应用于所有图像的样式。在这个例子中，假设我们想要一个带圆角的2像素边框。

将这样的Class属性添加到html文件的图像中：

<img src="http://localhost/image001.jpg" class="your-class">

“你的班级”是你创建的班级 - 根据你的意愿命名。

在html文件中的样式标记之间创建类，如下所示：

<style>
.your-class {
    border: 2px;
    border-radius: 20px;
}
</style>

或者您可以将样式放在单独的CSS文件中（不带样式标记），并将其引用到html文件的head标记中，如下所示：

<link rel="stylesheet" type="text/css" href="/css/styles.css"/>

假设您的CSS是名为“styles.css”的文件，并且位于您网站根目录中包含的css文件夹中。

已编辑：不是OP正在寻找的答案，但已经过编辑，以包含任何登陆此处的人的其他详细信息。

Answer 3

您可以使用每个 src 元素的 <img> 作为选择器 CSS。

然后，您可以设置特定图片的样式 ，而无需更改html代码中的任何内容。

工作示例：

body { text-align: center } img { margin: 0 auto; } img[src="http://placehold.it/350x149"] { border: 10px solid black } img[src="http://placehold.it/350x150"] { border: 10px solid red } img[src="http://placehold.it/350x151"] { border: 10px solid blue }

<body> <img src="http://placehold.it/350x149"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x151"> </body>

Answer 4

var images = document.querySelectorAll("img");

    for(var i = 0;i < images.length;i++){
      var image = images[i];
      var imageSrc = images[i].src;
      if (imageSrc.indexOf("a") !== -1) {
      console.log(image);
      images[i].style.width = '500px';
      images[i].style.height = '500px';
      images[i].style.zIndex = '9999999999999999999999999';
      images[i].style.border = '20px solid red';
      }
    }

设计特定图像

4 个答案: