在 HTA 中失去焦点时,按钮的虚线边框变为两条实线边框

Dashed border of a button changes to two solid borders when losing focus in HTA

在我的 HTA 文件中,我使用 VBScript 在单击按钮时更改按钮的外观。单击的按钮获得虚线边框(如预期的那样)。但是当鼠标离开按钮时,虚线边框变为实线边框加上实线青色内边框。我怎样才能避免这种情况?

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Dashed border test</title> 
    <HTA:APPLICATION 
        ID              = "test"
        APPLICATIONNAME = "test" >

    <script language="VBScript" type="text/vbscript">
        Sub StopButton
            document.getElementsByTagName("button").item(0).style.border="dashed medium black"
            document.getElementsByTagName("button").item(1).style.border="none"
        End Sub
        Sub PlayButton
            document.getElementsByTagName("button").item(1).style.border="dashed medium black"
            document.getElementsByTagName("button").item(0).style.border="none"
        End Sub
    </script>
    <style type="text/css">
        button {width:100;height:80;font-size:24;}
    </style>
</head> 

<body>
    <button type="button" onclick="vbscript:StopButton" style="background:blue; color:white;" value="Stop">Stop</button>
    <button type="button" onclick="vbscript:PlayButton" style="background:#0f0;" value="Play">Play</button>
</body> 
</html>

我用IE11。 navigator.userAgent="Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3)"

编辑

附加信息:当我单击背景(白色区域)时,按钮边框变回虚线样式(如左图所示)。

我是这样解决的。

首先打开一个保存在内存中的全局变量。因此,当用户单击任一选项时。单击它后,这些选项可帮助它防止突出显示 html 元素的默认颜色。

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Dashed border test</title> 
    <HTA:APPLICATION 
        id              = "test"
        applicationname = "test" 
        singleinstance="yes"
        contextmenu="yes"
        navigable="yes"
    />

    <script language="vbscript" type="text/vbscript">
        stopclicked=false
        playclicked=false
        sub stopbutton(click)
            if ((click = true) OR (stopclicked = true)) then
                btnplay.classname="none"
                btnstop.classname="dashed"
                stopclicked=true
                playclicked=false
            else
                window.focus
            end if
        end sub
        sub playbutton(click)
            if ((click = true) OR (playclicked = true)) then
                btnplay.classname="dashed"
                btnstop.classname="none"
                stopclicked=false
                playclicked=true
            else
                window.focus
            end if
        end sub
    </script>
    <style type="text/css">
        button {width:100; height:80; font-size:24;}
        .dashed {border-style: dashed; border-style: black; border-style:medium;}
        #btnstop {background:blue; color:white;}
        #btnplay {background:#0f0;}
        .dashed:
    </style>
</head> 

<body link="" vlink="" alink=""> 
    <button id="btnstop" onclick="stopbutton(true)" onfocus="stopbutton(false)" value="Stop">Stop</button>
    <button id="btnplay" onclick="playbutton(true)" onfocus="playbutton(false)" value="Play">Play</button>
</body> 
</html>