前端调试DOM断点实例

最新推荐文章于 2024-04-19 09:00:00 发布

bcbobo21cn

最新推荐文章于 2024-04-19 09:00:00 发布

阅读量1.9k

点赞数

分类专栏： web前端文章标签：前端 javascript html DOM DOM断点

本文链接： https://blog.csdn.net/bcbobo21cn/article/details/123026874

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

随便找一个html/js；

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>js改变div的宽度和高度</title>
      <style>
          #mydiv{
              width: 100px;
              height: 100px;
             background-color: pink;
         }
     </style>
     <script>

function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}  

//..
//...........
         window.onload = function () {
             //拿到div
             var div = document.getElementById("mydiv");
             //拿到两个按钮
             var btns = document.getElementsByTagName("input");
 
//.........
//......
//......

             btns[0].onclick = function () {
                 //拿到div显示出来的宽度
                 //alert(getStyle(div,"width"));
                 //alert(parseInt(getStyle(div,"width")) + 20);
                 //改变宽度
                 div.style.width = parseInt(getStyle(div,"width")) + 50 + "px";
             }
             btns[1].onclick = function () {
                 //改变高度
                 div.style.height = parseInt(getStyle(div, "height")) + 50 + "px";
             }
         }
 
         //获取style样式的css属性,考虑兼容;ie,火狐/谷歌;
         function getStyle(parm1,parm2) {
             return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名
         }
     </script>
 </head>
 <body>
     <div id="mydiv"></div>
     <input type="button" value="改变宽度"/>
     <input type="button" value="改变高度"/>
 </body>
 </html>

该html的js当点击按钮改变div的宽度和高度；