Question

我制作了一个带有一组有效图像的数组。我只是不知道该如何将图像样式设置为图像；

  var imageURLs = [
       "./images/404/random1.png"
     , "./images/404/random2.png"
     , "./images/404/random3.png"
     , "./images/404/random4.png"
     , "./images/404/random5.png"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"404 Image."/>';
    img.className  = "404image";
    img.width = "10%"
    return img;
  }

  document.write(getImageTag());

我假设您可以使用类名对其进行样式设置，但我无法使.404image在CSS中进行样式设置。

有什么想法吗？在此先感谢，真的很困。

Answer 1

CSS类名称不能以数字开头。例如，如果您将其命名为image404，则可以使用.image404

对其进行访问。

编辑：可以在类名if you escape it中使用数字作为第一个字符。我仍然不建议这样做，因为它会带来麻烦，并且违反了其他语言的大多数命名标准。

Answer 2

尝试一下：

img += ' class="404image" width="10%"'; /* add line */
img += '\" alt=\"404 Image."/>';
img.className  = "404image";            /* remove line */
img.width = "10%";                      /* remove line */

P.S。 String没有className或width属性。另外，404image无效，因为它不能以数字开头。

var urls = ['https://4.bp.blogspot.com/-u0ld9dGuSD4/WmzFFRAJSlI/AAAAAAAABxY/IMoM6ckwf0csjBWMkBNVxPLZSZCMIvULwCLcBGAs/s1600/404-page-not-found-200.gif', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuw1_2s5Ig8HtoQPV_qaP0AHeJzejhoeDDuW8u4VIYxslhYS1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUWkb3n7kAoqRDRe8wsEy3WqZlUaPkBH1MUWyahboi7buKUzd'];
document.querySelector('._404image').src = urls[Math.floor(Math.random() * urls.length)];

._404image {
  margin: auto;
}

.container {
  position: relative;
  width: 80%;
  text-align: center;
}

<div class="container">
  <img class="_404image" />
</div>

Answer 3

使用JS将创建的样式和样式设置为HTML元素时可以做的一件事是：

var fruit_pic = document.createElement("IMG")
fruit_pic.setAttribute("src", "https://melbournechapter.net/images/fruit-transparent-berry-6.png");
fruit_pic.setAttribute("width", "90");
fruit_pic.setAttribute("height", "60");
document.body.appendChild(fruit_pic);

body {
  background-color: white;
  text-align: center;
  width: 450px;
  margin: 0;
  padding: 0;
}

p1 {
  color: blue;
  font-family: arial;
}

p2 {
  color: blue;
  font-family: arial;
}

p3 {
  font-family: arial;
}

<body>
<h1>Fruit</h1>
</body>

我是从this TryIt editor那里拿来的。

还制作了JSFiddle for it ...

Answer 4

使用Image()构造函数。

getObjects() {
  return this.http.get<any[]>(this.myUrl).pipe(
    tap( objects => {
      // whatever action like logging a message for instance
    }, err => {
      console.error(err);
      // whatever else I want to do
    })
  );
}

从JS更改输出图像大小

4 个答案: