Question

我一直在我的博客www.whataboutki.com上玩CSS Style Switching，并且还添加了Google Friend Connect。我想在用户更改样式时更改GFC小部件的颜色。这是GFC的脚本... div id =“div-1229769625913”是否意味着我可以从我的css文件中访问它？如果是这样我将如何这样做？

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
    var skin = {};
    skin['HEIGHT'] = '385';
    skin['BORDER_COLOR'] = '#cccccc';
    skin['ENDCAP_BG_COLOR'] = '#e0ecff';
    skin['ENDCAP_TEXT_COLOR'] = '#333333';
    skin['ENDCAP_LINK_COLOR'] = '#0000cc';
    skin['ALTERNATE_BG_COLOR'] = '#ffffff';
    skin['CONTENT_BG_COLOR'] = '#ffffff';
    skin['CONTENT_LINK_COLOR'] = '#0000cc';
    skin['CONTENT_TEXT_COLOR'] = '#333333';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
    skin['CONTENT_HEADLINE_COLOR'] = '#333333';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
     { id: 'div-1229769625913',
       site: '10794935298529647173'},
      skin);
</script>

Answer 1

我会尝试先查看页面之间是否有div-1229769625913更改。如果没有那么你可以在你的CSS文件中重新设置，否则你将不得不改变你的样式切换器中的skin的颜色（我假设是JS）。

Answer 2

ID由GFC生成。它使用在* .gmodule.com服务器上托管小工具代码的iFrame填充DIV

理论上，您可以在加载DOM后更改其样式

来访问和修改它们

尝试更改样式

的“皮肤”地图中的值

例如。 skin ['ALTERNATE_BG_COLOR'] ='＃fffffff';

祝你好运！

Answer 3

div ID在页面之间保持不变，但是，它会生成iframe，并且该iframe中会显示GFC小工具。您的CSS样式表无法控制该iframe内容的样式，因此实现此目的的唯一方法是使用一些javascript。

最简单的解决方案是删除该哈希中的所有值，并在呈现小工具之前，根据当前使用的样式表替换任何适当的值。这样你就不必弄乱iframe的DOM了，因为谷歌不希望你这么做，所以这是非常简单且不可靠的脆弱。

所以你的代码看起来像这样：

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
    function currentSkin() {
      // Put some real code that detects what the
      // right color scheme is here.
      return 'VERY_BLUE';
    }

    var skins = {};
    skins['VERY_BLUE'] = {};
    skins['VERY_RED'] = {};
    skins['VERY_BLUE']['HEIGHT'] = '385';
    skins['VERY_BLUE']['BORDER_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ENDCAP_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['ALTERNATE_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_BG_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_SECONDARY_LINK_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_SECONDARY_TEXT_COLOR'] = '#0000ff';
    skins['VERY_BLUE']['CONTENT_HEADLINE_COLOR'] = '#0000ff';
    skins['VERY_RED']['HEIGHT'] = '385';
    skins['VERY_RED']['BORDER_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['ENDCAP_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['ALTERNATE_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_BG_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_SECONDARY_LINK_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_SECONDARY_TEXT_COLOR'] = '#ff0000';
    skins['VERY_RED']['CONTENT_HEADLINE_COLOR'] = '#ff0000';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
     { id: 'div-1229769625913',
       site: '10794935298529647173'},
      skins[currentSkin()]);
</script>

Google Friend Connect + CSS样式切换

3 个答案: