如何在JavaScript中实现立体边框

我正在构建一个新的自动幻灯片，下面是矩形。我想实现的是一个黑色的纯色，它标记了彩色的矩形，这样访问者就知道此时显示了哪张幻灯片

正如您可能看到的，我添加了style.border，但幻灯片后面没有黑色纯色。显示2e幻灯片后，第二个矩形应标记为黑色纯色等

任何知道如何解决这个问题的人

var-imagecount=1；
var总计=4；
函数chgBubbleColorMiband（）{
var nodes=document.getElementById（'bubbles-miband'）.getElementsByTagName（“div”）；
对于（var i=0；i total）{imagecount=1；}
如果（imagecount<1）{imagecount=total；}
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}
window.setInterval（函数slideA（x）{
var Image=document.getElementById（'imgmiband'）；
如果（imagecount>total）{imagecount=1；}
如果（imagecount<1）{imagecount=total；}
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}, 5000);
功能选择幻灯片（幻灯片编号）{
imagecount=slideNumber；
var Image=document.getElementById（'imgmiband'）
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}

@介质（最小宽度：767px）{
#矩形miband{
宽度：自动；
保证金：0px自动；
文本对齐：居中；
最高：90%；
位置：绝对位置；
左：自动；
高度：自动；
右：自动；
显示：块；
}
}
#矩形miband>div{
显示：内联块；
宽度：30px；
高度：14px；
利润上限：24px；
右边距：14px；
左边距：14px；
边缘底部：0px；
背景：rgba（0,0,0,1）；
文本对齐：居中；
边框宽度：1px；
边框样式：实心；
边框颜色：透明；
字号：17px；
过渡：背景0.3s线性0s；
光标：指针；
文字装饰：无；
}

---

您可以通过以下方式在javascript中更改边框：

nodes[i].style.border = "solid '#000000' 4px";

---

我认为你的代码是好的，除了CSS部分。 尝试从更改边框定义

   border: 1px solid transparent;

致：

这应该会有所帮助。在此更改之前，您只需覆盖边框css属性。

您有两个输入错误
第四行
getElementbyId->getElementbyId

和
var Image=document.getElemenById（'imgmiband'）->getElementById

使用Google Chrome的控制台来帮助调试javascript，这应该是一个很容易捕捉到的；）

var-imagecount=1；
var总计=4；
函数chgRectangleColorMiband（）{
var nodes=document.getElementById（'rectangle-miband'）.getElementsByTagName（“div”）；
console.log（节点）；
对于（var i=0；i total）{imagecount=1；}
如果（imagecount<1）{imagecount=total；}
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}
window.setInterval（函数slideA（x）{
var Image=document.getElementById（'imgmiband'）；
如果（imagecount>total）{imagecount=1；}
如果（imagecount<1）{imagecount=total；}
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}, 5000);
功能选择幻灯片（幻灯片编号）{
imagecount=slideNumber；
var Image=document.getElementById（'imgmiband'）
Image.src=“Img/miband”+imagecount+”.jpg”；
chgRectangleColorMiband（）；
}

@介质（最小宽度：767px）{
#矩形miband{
宽度：自动；
保证金：0px自动；
文本对齐：居中；
最高：90%；
位置：绝对位置；
左：自动；
高度：自动；
右：自动；
显示：块；
}
}
#矩形miband>div{
显示：内联块；
宽度：30px；
高度：14px；
利润上限：24px；
右边距：14px；
左边距：14px；
边缘底部：0px；
背景：rgba（0,0,0,1）；
文本对齐：居中；
边框：1px实心透明；
字号：17px；
过渡：背景0.3s线性0s；
光标：指针；
文字装饰：无；
}

    border-width: 1px;
    border-style: solid;
    border-color: transparent;