Javascript 使用Intro.js时，如何调整特定步骤的工具提示样式

我正在尝试更改第一步（

data step=“1”

）的样式，我通过调用

onbeforechange（）

从本质上讲，我正在尝试将工具提示置于第一步的中心位置。非常感谢您的帮助；我几乎是JavaScript的新手

尝试使用以下代码：

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //change CSS styling only for the first box
            $(".introjs-helperLayer").css("text-align", "center");

        break;
    }
}).start();

---

我总算找到了答案。原来

introJs（）.onbeforechange（）

无法获取targetElement参数（已报告此错误）

因此，我使用了

introJs（）.onchange（）

并在前后声明了

start（）

函数。详情如下:

introJs().start();
introJs().onchange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //Center the tooltip
            $(".introjs-tooltip").css("margin-left", "300px");
        break;

        case "2":
            //Remove margin-left
            $(".introjs-tooltip").css("margin-left", "0");
        break;

    }
}).start();

否则，案例“1”的css函数将不会启动。我尝试用case“1”的css函数替换

introJs（）.start（）

，但没有成功。因此，您必须发射两次

start（）

不幸的是，我仍然没有弄清楚如何让工具提示精确地位于页面的中心（边距：即使使用了！重要信息），也根本不起作用。很遗憾，但是你能做什么呢

---

我希望这对以后的其他人有所帮助。

您可以为该特定步骤的工具提示添加一个类。然后可以通过css设置工具提示的样式

为此，将

数据工具ipclass=“sample class”

属性添加到所需的元素中

可在以下位置找到接受属性的完整列表：

---

targetElement.getAttribute（“数据步骤”）

将返回

null

，如果您使用JSON进行步骤初始化

我有另一个解决方案，您可以应用

id

而不是

step

：

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.id)
    {
        case "intendedId":
            $(".introjs-helperLayer").css("text-align", "center");
        break;
    }
}).start();

如果您在使用JSON对象进行初始化时仍想知道当前步骤，以下是我使用的方法：

var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: "Text1"
                    },

                    {
                        element: document.querySelector(".leg"),
                        intro: "text2",
                        position: 'bottom'
                    }
                ]
            });

    intro().onbeforechange(function(targetElement) {
        var stepNumber = 0;
        for (var i=0; i < intro._options.steps.length; i++) {
            if (intro._options.steps[i].element == targetElement)
                stepNumber = i;
            }
        switch (stepNumber)
        {
           case "1":
             //change CSS styling only for the first box
             $(".introjs-helperLayer").css("text-align", "center");

            break;
        }
    }).start();

var intro=introJs（）；
intro.setOptions({
步骤：[
{
简介：“文本1”
},
{
元素：document.querySelector（“.leg”），
简介：“text2”，
位置：'底部'
}
]
});
intro（）.onbeforechange（函数（targetElement）{
var stepNumber=0；
对于（变量i=0；i

你好，Mehrabani先生，感谢您的回复，感谢您的项目：）不幸的是，getAttribute返回空值，因此switch语句根本不起作用。奇怪的是，我发现将introJs（）.onbeforechange（）更改为introJs（）.onchange（），getAttribute（“数据步骤”）返回一个数字（尽管样式仍然不起作用）。onbeforechange（）和onchange（）之间真的有区别吗？@MonElisa谢谢。我很抱歉地说，这是IntroJs旧版本中的一个bug，它将在下一个版本中修复（它也在Github存储库的

master

分支中修复）。

var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: "Text1"
                    },

                    {
                        element: document.querySelector(".leg"),
                        intro: "text2",
                        position: 'bottom'
                    }
                ]
            });

    intro().onbeforechange(function(targetElement) {
        var stepNumber = 0;
        for (var i=0; i < intro._options.steps.length; i++) {
            if (intro._options.steps[i].element == targetElement)
                stepNumber = i;
            }
        switch (stepNumber)
        {
           case "1":
             //change CSS styling only for the first box
             $(".introjs-helperLayer").css("text-align", "center");

            break;
        }
    }).start();