zoukankan      html  css  js  c++  java
  • JavaScript给网页元素加上边框不改变原来的布局

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

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

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

    执行看一下效果:

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

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

     1 function drawborder() {
     2     var element_ul= document.getElementsByClassName("s-hotsearch-content")[0];
     3         var element_lis = element_ul.childNodes;
     4         for (i = 0; i < element_lis.length; i++) {
     5             var s1 = window.getComputedStyle(element_lis[i]);
     6             element_lis[i].style.marginRight = (parseInt(s1.marginRight) - 3) + "px";
     7             element_lis[i].style.marginLeft = (parseInt(s1.marginLeft) - 3) + "px";
     8             element_lis[i].style.marginTop = (parseInt(s1.marginTop) - 3) + "px";
     9             element_lis[i].style.marginBottom = (parseInt(s1.marginBottom) - 3) + "px";
    10             element_lis[i].style.border = "3px dotted red";
    11         }
    12     }
    13 drawborder();

    好了,我们再来看一下效果:

     

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

     

    作者:九年新
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
  • 相关阅读:
    PHPStorm下XDebug配置
    HDU 4633 Who's Aunt Zhang (Polya定理+快速幂)
    VC++深入详解-第五章学习心得
    nginx access log logrotate配置
    判断变量是否存在(python)
    一步一步学android之布局管理器——LinearLayout
    向前辈致敬 strspn
    poj 1087 (最大流)
    cocos2d-x Touch 事件应用的一个例子
    [置顶] C#扩展方法 扩你所需
  • 原文地址:https://www.cnblogs.com/yellow3gold/p/15538529.html
Copyright © 2011-2022 走看看