Border-Color不见了

最新推荐文章于 2024-06-24 06:45:20 发布

laorer

最新推荐文章于 2024-06-24 06:45:20 发布

阅读量1.5k

点赞数

分类专栏： application 文章标签： div

本文链接：https://blog.csdn.net/laorer/article/details/2942641

版权

application 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在编辑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>
 