Question

我正在环顾网络，看到一篇关于每次刷新页面时都会改变img和引用的帖子这里是代码，信用转到原始开发人员，但我只是想知道我可以在哪里添加类img-circle，以便它可以在css中使用图像的圆形边框，对不起这是我的第一篇文章在Stackoverflow中

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img src="' + quote.img + '">';
})();

Answer 1

只需将其添加到img代码：

'<img class="img-circle" src="' + quote.img + '">';

完整代码：

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();

希望这有帮助。

＆＃13;

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();

＆＃13;

.img-circle{
  border-radius: 50%;
}

＆＃13;

<div id="quote"></div>

＆＃13;

Answer 2

使用set border-radius在img标记内添加样式属性。

'<img src="' + quote.img + '" style="border-radius: 100%;">';

Answer 3

在html标记中添加类名称，如class="circle-image"

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img src="' + quote.img + '" class="circle-image">';
})();

.circle-image{
  border-radius:50%;
}

<div id="quote"></div>

如何添加设置的边框半径？

3 个答案: