将 z-index 分配给 Javascript 插件答案

【问题标题】：Assigning z-index to Javascript plugin将 z-index 分配给 Javascript 插件
【发布时间】：2018-07-13 13:17:33
【问题描述】：

我正在尝试将 LinkedIn 插件嵌入网站。然而，由于这个网站的布局包括堆叠的图像（使用z-index），我试图将插件分配给一个 CSS 类以分配它一个 z-index 并将其放置在正确的位置。

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

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%;
}

【问题讨论】：

你不能设置脚本标签的样式
您需要通过脚本从注入的 HTML 中识别特定的类名，并为其分配 z-index。
您首先需要了解这些脚本元素并不是显示的实际内容——它们的工作只是获取该内容并将其放入文档中。首先检查您要在浏览器的开发工具中格式化的实际内容，然后找出应该将 z-index 应用于哪些元素，以获得所需的结果，以及它们具有哪些特征可以使它们成为可选的（Ids、类，相对于其他元素的位置。）

标签： javascript html css plugins z-index

【解决方案1】：

脚本标签只是将 LinkedIn javascript 文件导入您的应用程序。它根本不渲染。

LinkedIn javascript 文件会在运行时在您的页面中生成额外的 HTML。这个 HTML 应该是自定义的。

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

【讨论】：

【解决方案2】：

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

这个溢出问题更详细地介绍了最后一部分，并有一个很好的例子，使用所描述的方法获取单个元素 - Add class to first child using javascript

[编辑] 同样使用 z-index，您需要确保有意删除任何指定浮动的样式。仅添加绝对定位可能还不够。如果您可以删除所有样式，然后应用自己的样式，那将是最好的。浮动元素不能 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);

【讨论】：