首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用html和css设置此代码的样式?

如何使用html和css设置此代码的样式?
EN

Stack Overflow用户
提问于 2018-06-21 05:00:24
回答 1查看 87关注 0票数 -2

下面的代码用于在标签名称中列出blogger帖子,如果帖子具有特定的标签名称,它将显示在此列表中。我希望能够改变的外观,一切都是通过改变的地方,帖子图像将看起来,标题将看起来,改变背景颜色,添加边框,阴影改变字体等...(我知道如何改变css的外观,但我不知道如何与css和html集成下面的代码)在代码显示标题和标题图像的右边。

代码语言:javascript
复制
      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();
代码语言:javascript
复制
    <div>
      <ul id="postList12"></ul>
    </div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-21 05:36:57

这会创建一些你可以用CSS设置样式的东西。例如:

代码语言:javascript
复制
#postList12 li {
    border: 1px solid blue;
}

使用浏览器中的检查器来查看它生成了什么。如果您想要更改元素的顺序或添加新元素,则必须编辑脚本才能做到这一点。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50956945

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档