Border-Color不见了

最新推荐文章于 2025-10-05 12:42:23 发布

原创最新推荐文章于 2025-10-05 12:42:23 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#div

application 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了在HTML中使用CSS样式设置div元素的边框颜色时遇到的问题，特别是当使用borderColor属性后，该属性如何被拆分为具体的边框颜色属性如border-right-color等，并通过示例代码展示了这一过程。

在编辑div的属性 style中的borderColor时，再取div.outerHTML却发现borderColor属性不见了，慢慢地，发现了多出了个border-right-color属性，想来，borderColor的设定应该是分散边框中了吧，

下面的应该可以看出结果来

<html>
    <body>
    <DIV id="DIV_1" style="FONT-SIZE:18px; LEFT: 40px; OVERFLOW: hidden;  WIDTH:273px; COLOR: #FF00FF; FONT-FAMILY:Arial; POSITION: absolute; TOP: 40px; HEIGHT:45px; BORDER-WIDTH:1px; border-style:solid; BORDER-COLOR:#ff00ff; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: left" type="rectangle">
                    <LABEL height="90%"  width="100%"/>
                </DIV>
                <DIV id="DIV_2" style="BORDER-RIGHT: gray 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: gray 0px solid; PADDING-LEFT: 0px; FONT-SIZE:14px; LEFT: 45px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; BORDER-LEFT: gray 0px solid; WIDTH: 61px; COLOR:black; PADDING-TOP: 0px; BORDER-BOTTOM: gray 0px solid; FONT-FAMILY:Arial; POSITION: absolute; TOP: 40px; HEIGHT:24px; border-style:solid; BORDER-COLOR:#ff00ff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left" type="staticText">
                    <LABEL height="100%"  name="text"  width="100%">Text</LABEL>
                </DIV>
                <button onclick="adiv()" >OK</button>
                <button onclick="chgColor()">chg Color</button>
                <button onclick="showHtml()">showHtml</button>
                <script type="">
                    function adiv(){
                        alert(DIV_1.style.borderColor);
                    }
                    
                    function chgColor(){
                        //adiv();
                        DIV_1.style.borderColor ='#003402';
                        DIV_1.style.backgroundColor ='#003f23';
                    }
                    
                    function showHtml(){
                         var htm = DIV_1.outerHTML;
                         alert(htm);
                    }
                </script>
</body>
</html>