在脚本中添加CSS,可以吗?

恢复

我有这个脚本,站点上的一个人帮我解决了。

这是代码的第一部分,您可以按标记选择和分隔博客文章。

是否可以在代码的第一部分中添加CSS,使我们拥有Terror,Shounen,Ação标签,并使每个标签具有不同的颜色?

例如:恐怖:蓝色-少年:黄色-ção:绿色

在此处输入图片说明

这个脚本通过标签拉博客内容,但是所有列都是相同的颜色,我想在每个列中添加一个CSS来区分它们。

<div id="feed-list-container"></div>
<div style="clear:both;"></div>

<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Judul Widget 1",
            url: "https://elfenliedbrazil.blogspot.com/",
            tag: "Terror"
        },
        {
            name: "Judul Widget 2",
            url: "https://elfenliedbrazil.blogspot.com/",
            tag: "Shounen"
        },
        {
            name: "Judul Widget 1",
            url: "https://elfenliedbrazil.blogspot.com/",
            tag: "Ação"
        }
    ],
    numPost: 3,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 200,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=20"
    }
};
</script>
This is the second part of the code.
<script>
/*<![CDATA[*/
var mf_defaults = {
  feedsUri: [{
    name: "Posting JQuery",
    url: " ",
    tag: "JQuery"
  }, {
    name: "Posting CSS",
    url: "",
    tag: "CSS"
  }, {
    name: "Widget-Widget Blogger",
    url: " ",
    tag: "Widget"
  }],
  numPost: 4,
  showThumbnail: true,
  showSummary: true,
  summaryLength: 80,
  titleLength: "auto",
  thumbSize: 200,
  thumbWidth: 200, // new setting
  thumbHeight: 90, // new setting
  newTabLink: false,
  containerId: "feed-list-container",
  listClass: "list-entries",
  readMore: {
    text: "More",
    endParam: "?max-results=20"
  },
  autoHeight: false,
  current: 0,
  onLoadFeed: function(a) {},
  onLoadComplete: function() {},
  loadFeed: function(c) {
    var d = document.getElementsByTagName("head")[0],
      a = document.getElementById(this.containerId),
      b = document.createElement("script");
    b.type = "text/javascript";
    b.src = this.feedsUri[c].url + "/feeds/posts/summary" + (this.feedsUri[c].tag ? "/-/" + this.feedsUri[c].tag : "") + "?alt=json-in-script&max-results=" + this.numPost + "&callback=listEntries";
    d.appendChild(b)
  }
};
for(var i in mf_defaults) {
  mf_defaults[i] = (typeof(multiFeed[i]) !== undefined && typeof(multiFeed[i]) !== "undefined") ? multiFeed[i] : mf_defaults[i]
}

function listEntries(q) {
  var p = q.feed.entry,
    c = mf_defaults,
    h = document.getElementById(c.containerId),
    a = document.createElement("div"),
    d = "",
    l = c.feedsUri.length,
    n, k, m, g;
  for(var f = 0; f < c.numPost; f++) {
    if(f == p.length) {
      break
    }
    n = (c.titleLength !== "auto") ? p[f].title.$t.substring(0, c.titleLength) + (c.titleLength < p[f].title.$t.length ? "&hellip;" : "") : p[f].title.$t;
    m = ("summary" in p[f]) ? p[f].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "") : "";
    m = (c.summaryLength < m.length) ? m.substring(0, c.summaryLength) + "&hellip;" : m;
    g = ("media$thumbnail" in p[f]) ? '<img src="' + p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//, "/w" + c.thumbWidth + "-h" + c.thumbHeight + "-c/") + '" style="width:' + c.thumbWidth + "px;height:" + c.thumbHeight + 'px;">' : '';
    for(var e = 0, b = p[f].link.length; e < b; e++) {
      k = (p[f].link[e].rel == "alternate") ? p[f].link[e].href : "#"
    }
    d += '<div class="post hentry"' + (!c.autoHeight ? ' style="height' + c.thumbHeight + 'px;overflow:hidden;"' : "") + ">";
    d += (c.showThumbnail) ? g : "";
    d += '<div class="post-title entry-title"><a href="' + k + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + n + "</a></div>";
    d += '<div class="summary">';
    d += "<span" + (!c.showSummary ? ' style="display:none;"' : "") + ">";
    d += (c.showSummary) ? m : "";
    d += "</span></div>";
    d += '<span style="display:block;clear:both;"></span></div>'
  }
  d += "";
  d += '<div class="more-link"><a href="' + c.feedsUri[c.current].url.replace(/\/$/, "") + "/search/label/" + c.feedsUri[c.current].tag + c.readMore.endParam + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + c.readMore.text + "</a></div>";
  a.className = c.listClass;
  a.innerHTML = '<div class="main-title"><h4>' + c.feedsUri[c.current].name + "</h4></div>" + d;
  h.appendChild(a);
  c.onLoadFeed(c.current);
  if((c.current + 1) < l) {
    c.loadFeed(c.current + 1)
  }
  if((c.current + 1) == l) {
    c.onLoadComplete()
  }
  c.current++
}
mf_defaults.loadFeed(0);
/*]]>*/
</script>
亚瑟·韦伯

扩展我的评论:

可能值得探索使用数据属性尽管您也可以在json中添加颜色代码属性,并在javascript部分的a.innerHTML处进行内联css /设置div的背景颜色。

需要特别注意的是,您的问题可能有很多解决方案,这就是我的解决方法。

您的css文件可能如下所示:

div[data-tag='Terror'] {
    background-color: blue;
}
div[data-tag='Shounen'] {
    background-color: yellow;
}
div[data-tag='Ação'] {
    background-color: green;
}

并且您将更新javascript以data-tag="'+c.feedsUri[c.current].tag+'"在您感兴趣的html元素上添加一个

定位标记可能并不是您真正想要的位置,但这至少会使您朝着我认为要尝试的方向开始。

a.innerHTML = '<div data-tag="'+c.feedsUri[c.current].tag+'" +class="main-title"><h4>' + c.feedsUri[c.current].name + "</h4></div>" + d;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在 Django 模板的下面代码中添加斜杠可以吗?

来自分类Dev

JSX脚本可以执行Photoshop操作-可以吗?

来自分类Dev

方法可以吗?在javascript文件中

来自分类Dev

MATLAB中的稀疏表格,可以吗?

来自分类Dev

Flexbox中的Flexbox-可以吗?

来自分类Dev

我可以在CSS中应用脚本吗?

来自分类Dev

在关系数据库中添加表年份可以吗?

来自分类Dev

CSS:背景大小:覆盖率50%-可以吗?

来自分类Dev

更改 CSS 边框速记语法顺序可以吗?

来自分类Dev

Java中的地理坐标可以吗?

来自分类Dev

在11.10中安装python 3.2可以吗?

来自分类Dev

比较C中的指针和整数可以吗?

来自分类Dev

OOP设计中仅数据对象可以吗?

来自分类Dev

将布局放在Views / MyController目录中可以吗?

来自分类Dev

将文件包含在头文件中可以吗

来自分类Dev

在视图Rails中调用ActiveRecord方法可以吗?

来自分类Dev

在AVAudioEngine中从网络流数据,可以吗?

来自分类Dev

kafka将消息放回队列中,可以吗?

来自分类Dev

在React类中设置等待状态可以吗?

来自分类Dev

将计算放在for循环的主体中可以吗?

来自分类Dev

直接在Bean函数中插入值可以吗?

来自分类Dev

创建KafkaJS中已经存在的主题可以吗?

来自分类Dev

在React无状态组件中定义函数可以吗?

来自分类Dev

在Xlib中为颜色使用原始RGB可以吗?

来自分类Dev

在Python中包含图片数据,可以吗?

来自分类Dev

将布局放在Views / MyController目录中可以吗?

来自分类Dev

在shell中更新进程名称,可以吗?

来自分类Dev

在fedora中安装CentOS rpm可以吗?

来自分类Dev

在控制器测试中可以吗?

Related 相关文章

热门标签

归档