首页 > Ajax > Js学习笔记之问题收集

Js学习笔记之问题收集

         编程这种东西光看不练是不行的,自己也得突发奇想写点程序练练手,这个帖子也是把一些我遇到的问题和解决办法的集合。

         1、关于Dom对象坐标的问题

         相信看到一堆数学公式和单位,有人就开始头疼了,我把书上的一个例子扩展了下,想写个把图片自动移到页面中央的小程序,其实很简单,获得图片大小和当前窗口的大小就可以,但有几点总结下很容易出错。

         首先建议如果要移动一个对象,比如一张图片,在图片外面还是套一个层比较好,否则元素一多根本搞不清楚,统一用层的话有一致性。其次都知道图片的宽度和高度是 imgObject.style.width 和 imgObject.style.height ,但问题是返回的值并不是数值,而是带px的字符,所以我采用replace的方法将px替换掉以后,再用parseInt转成整数值。另外获得窗口的宽度和高度,在最后计算最后图片的left和top值,需要用floor或者ceil把值转换成整数而非浮点数便于使用。

         大致的Js程序简单如下,在IE8下运行正常:

         window.onload = init;
 
         ns4 = (document.layers)? true:false;
         ie4 = (document.all)? true:false;
         var xCenter = 0;
         var yCenter = 0;
 
        function init() {
            if (ns4) block = document.blockDiv;
            if (ie4) block = blockDiv.style;
           document.getElementById(“mover”).onclick = function() {
            moveTo(block,300,340);
            return false;
           }
           var h = parseInt(block.height.replace(‘/px/’,”),10);        

           var w =parseInt(block.width.replace(‘/px/’,”),10);        
           var xCenter = Math.floor(document.body.clientWidth/2-w/2);
           var yCenter = Math.floor(document.body.clientHeight/2 -h/2);
          document.getElementById(“movecenter”).onclick = function() { 
              moveTo(block,xCenter,yCenter);  
              return false;
             }
          }
 
      function moveTo(obj,x,y) {
            obj.left = x;
           obj.top = y;
       }

      2、Css的一些属性定义和作用

       line-height:line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。这个定义行间距挺方便的,基本上参数我觉得用百分比比较合适。

        有个页面上显示各种效果:http://www.w3school.com.cn/css/pr_dim_line-height.asp

分类: Ajax 标签: ,
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.