Question

我正在尝试将LinkedIn插件嵌入网站。但是，由于该网站的布局包含堆叠图像（使用z-index），因此我尝试将插件分配给CSS类，以为其分配z-index并将其放置在正确的位置。

到目前为止，这对我没有用，对其他实现有什么建议吗？以下是我的代码段。

HTML代码：

<script src="//platform.linkedin.com/in.js" type="text/javascript" 
class = "linkedin"></script>

<script type="IN/MemberProfile" data- 
id="MY_LINK" data- 
format="hover" data-related="false" class = "linkedin"></script>

CSS代码：

.linkedin
{
    position: absolute;
    z-index: 2;
    top: 60%;
    left: 40%;
}

Answer 1

script标记只是将LinkedIn javascript文件导入到您的应用程序中。它根本不渲染。

LinkedIn javascript文件在运行时在页面中生成其他HTML。该HTML应该是自定义的。

希望生成的HTML上有唯一的类和ID，可让您将特定的样式应用于每个HTML元素。您可以在浏览器中使用 F12 来检查生成的HTML的模式并相应地添加CSS。

Answer 2

如果脚本未生成类名或ID，则可以使用javascript函数获取子元素的子元素，依此类推，直到能够获取所需的节点并为其分配类。最近，我不得不使用一些脚本生成的代码来执行此操作。显然，这只是一个例子。在我的情况下，我需要获取脚本生成的几个元素，因此必须用于语句和列表。如果仅尝试访问一个元素，则可能不需要这样做。因此，请原谅此示例的复杂性，但是您可以看到，通过获取子节点并确保消除脚本生成的所有未定义，空值和无子元素，我最终能够获得所需的节点列表，因此可以进行迭代通过它们并根据需要更改其样式。因此，即使您的元素没有指定类或id，您也应该能够找到一种获取它们的方法，然后使用js将其类设置为您在CSS中定义的类。

这个溢出问题更详细地介绍了最后一部分，并提供了一个很好的示例，说明了使用上述方法-Add class to first child using javascript

[编辑] 同样，使用z-index时，您将要确保有意删除任何指定float的样式。仅添加绝对定位可能还不够。如果您可以删除所有样式，然后应用自己的样式，那将是最佳选择。浮点元素不能z后置，并且通常脚本生成的代码是浮点定位的。 [编辑]

var listRows = document.getElementById("extHGrid").childNodes;
    //debugging
    //console.log(listRows);

    //iterate through listRows, removing undefined or childless objects while adding the rest to listUsers (this returns all the user divs in the content block)
    var listUsers = [];
    listUsers = [];
    for (r = 0; r < listRows.length; r++) {
        if (listRows[r] !== undefined && listRows[r].children !== null && listRows[r].children[0] !== undefined) {
            listUsers.push(listRows[r].children[0]);
        }
    }
    //debugging
    console.log(listUsers);

    /* 
     *iterate through divs in content block, get child containing return time and add it to listTimers
     * assumes return time is in last column/child element/ span of div
     */
    var listTimers = [];
    listTimers = [];
    for (t = 0; t < listUsers.length; t++) {
        if (listUsers[t] !== undefined && listUsers[t].children !== null) {
            listTimers.push(listUsers[t].lastElementChild);
        }
    }
    //dubugging
    console.log(listTimers);

    //iterate through divs in content block, get child containing identifier and add it to listTimers
    var listUserIdentity = [];
    listUserIdentity = [];
    for (u = 0; u < listUsers.length; u++) {
        if (listUsers[u] !== undefined && listUsers[u].children !== null) {
            /*
             * change children[1] to children[pos] where pos == position of child containing identifer in children index of div 
             * if identifier is in different position - identifier can be name, UserSys or anything so long as it is unique to each user and not null or " "
             */
            listUserIdentity.push(listUsers[u].children[1]);
        }
    }
    //dubugging
    console.log(listUserIdentity);

将z-index分配给Javascript插件

2 个答案: