Question

下面的代码用于在标签名称中列出博客作者的帖子，如果帖子具有特定的标签名称，它将显示在此列表中。我希望能够通过更改帖子图像的外观，标题的外观，更改背景颜色，添加边框，阴影更改字体等来更改所有内容的显示方式...（我知道更改css的外观，但我不知道如何将以下代码与css和html集成在一起）目前，代码显示图像的标题和标题的右侧。

      var startIndex = 1;
      var maxResults = 5;
      var allResults = [];
      function sendQuery12()
      {
        var scpt = document.createElement("script");
        scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
        document.body.appendChild(scpt);
      }
      function printArrayResults(root)
      { 
        //Sort Alphebetically
        allResults.sort(function(a, b){
          var a_string = a.children[0].textContent ;
          var b_string = b.children[0].textContent ;
          if(a_string < b_string) return -1;
          if(a_string > b_string) return 1;
          return 0;
        })
        var elmt = document.getElementById("postList12");
        for (index = 0; index < allResults.length; index++) {
          elmt.appendChild(allResults[index]);
        }
      }
      function processPostList12(root)
      {   
        var elmt = document.getElementById("postList12");
        if (!elmt)
          return;
        var feed = root.feed;
        if (feed.entry.length > 0)
        {
          for (var i = 0; i < feed.entry.length; i++)
          {
            var entry = feed.entry[i];
            var title = entry.title.$t;
            var date = entry.published.$t;

            if( entry.media$thumbnail != undefined ){
              var imageThumb = entry.media$thumbnail.url ;
            } else {
              var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
            }

            for (var j = 0; j < entry.link.length; j++)
            {
              if (entry.link[j].rel == "alternate")
              {
                var url = entry.link[j].href;
                if (url && url.length > 0 && title && title.length > 0)
                {
                  var liE = document.createElement("li");
                  var a1E = document.createElement("a");
                  var postImage = document.createElement("img");

                  a1E.href = url;
                  a1E.textContent = title;
                  postImage.src = imageThumb;

                  liE.appendChild(a1E);
                  liE.appendChild(postImage);

                  //elmt.appendChild(liE);
                  allResults.push(liE);

                }
                break;
              }
            }
          }
          if (feed.entry.length >= maxResults)
          {
            startIndex += maxResults;
            sendQuery12();
          } else {
            printArrayResults();
          }
        }
      }
      sendQuery12();

    <div>
      <ul id="postList12"></ul>
    </div>

Answer 1

这将创建可以使用CSS样式化的内容。例如：

#postList12 li {
    border: 1px solid blue;
}

在浏览器中使用检查器查看其内容。如果您想更改元素的顺序或添加新元素，则必须编辑脚本来完成。

如何使用html和CSS设置此代码的样式？

1 个答案: