JavaScript给网页元素加上边框不改变原来的布局

1.这里我以百度首页为例：

加边框的操作很简单，比如我想将<ul>元素下面的<li>元素都加上3px的虚线红色边框，首先通过getElementsByClassName找到<ul>元素，遍历子元素，给border赋值就可以了。

function drawborder() {
    var element_ul= document.getElementsByClassName("s-hotsearch-content")[0];
        var element_lis = element_ul.childNodes;
        for (i = 0; i < element_lis.length; i++) {
            element_lis[i].style.border = "3px dotted red";
        }
    }
drawborder();

执行看一下效果：

但是意外发生了，我们可以看到网页的布局发生了变化，分析网页可以看到原因：是由于没有改变<li>元素的margin值导致的。

2.很简单，我们同步修改一下加边框之后的margin值；将li元素的marginRight /marginLeft /marginTop/marginBottom 都相应的减3px；

function drawborder() {
    var element_ul= document.getElementsByClassName("s-hotsearch-content")[0];
        var element_lis = element_ul.childNodes;
        for (i = 0; i < element_lis.length; i++) {
            var s1 = window.getComputedStyle(element_lis[i]);
            element_lis[i].style.marginRight = (parseInt(s1.marginRight) - 3) + "px";
            element_lis[i].style.marginLeft = (parseInt(s1.marginLeft) - 3) + "px";
            element_lis[i].style.marginTop = (parseInt(s1.marginTop) - 3) + "px";
            element_lis[i].style.marginBottom = (parseInt(s1.marginBottom) - 3) + "px";
            element_lis[i].style.border = "3px dotted red";
        }
    }
drawborder();

好了，我们再来看一下效果：

 

可以看到页面的布局丝毫没有受到影响。