zoukankan      html  css  js  c++  java
  • 那些宽高

    所有元素产生偏移一的参照物是文档(浏览器的左上角)

    会产生偏移量的属性:标准流(就是盒子上下排列),float,margin,position的absolute或rellative

    定位是在margin外面开始定位的

    offsetLeft/offsetTop          左偏移和上偏移

    offsetHeight/offsetWidth   内容的宽/高+padding+border

    clientWidth/clientHeight     可见内容的宽/高+padding

    scrollTop/scrollleft            上卷去的内容/左卷曲的内容

    scrollWidth/scrollHeight      内容的实际宽/高

    jq里的:

    $(oDiv).width();//内容的宽

    $(oDiv).innerWidth();//clientWidth

    $(oDiv).outerWidth();//不加双边距的offsetWidth;

    $(oDiv).outerWidth(true);//双边距+offsetWidth;

    offsetLeft=绝对定位的值+margin(记得margin的值初始化)

    经常会把需要把offsetLeft转化为绝对定位。记得margin的值初始化

    /*********把offsetLeft转化为绝对定位**********/

    oDiv.style.left=oDiv.offsetLeft+"px";

    oDiv.style.margin=0;

    oDiv.style.position="absolue"

    offsetParent就是产生偏移的参照物,在默认的文档流下,所有的元素的offsetParent是文档(document页面){body代理},

    当这个元素的祖先元素写了绝对定位,则以这个祖先元素为offsetParent

    /*************得到偏移量的方法****************/

    function getPositon(ele){
    var l=ele.offsetLft;
    var t=ele.offseTop
    while(offSetParent){
    var ele=ele.offsetParent;
    if(window.navigator.userAgent.indexOf('MSIE 8')>-1){
    l+=offSetParent.offsetLeft;
    t+=offSetParent.offsetTop;
    }else{
    l+=ele.offsetLeft+ele.clientLeft;
    t+=ele.offsetTop+ele.clientTop;
    }
    }
    return {left:l,top:t
    }

    ie7下currentStyle不规范,是因为他们采取的是浏览器给的默认值,解决方法:把这些标签需要计算的默认值初始化

    /*************获得样式第一种************/
    function getCss(ele,attr){
    if(typeof getComputedStyle=="function"){
    return getComputedStyle(ele,null)[attr]
    }else{
    return ele.currentStyle[attr];
    }
    }


    /*************第二种方法*****************/
    function getCss(ele,attr){
    try{
    return getComputedStyle(ele,null)[attr]
    } catch(e){
    return ele.currentStyle[attr];
    }
    }

    ////////////////////第三种获得样式/////////////////////
    function getCss(ele,attr){
    if(window getComputedStyle){//window,因为这个变量在ie6/7/8里没有,一个变量如果未定义,不能直接操作(读),但是,一个变量没有声明,可以用typeof去判断,如果是属性没有读限制
    return getComputedStyle(ele,null)[attr]
    }else{
    return ele.currentStyle[attr];
    }
    }

  • 相关阅读:
    导入已有项目到svn
    Linux用ICMP协议实现简单Ping网络监测功能
    c++ tcp 服务器和客户端例子
    C++ Socket 编程
    c++工厂模式和多线程结合
    Linux中ls命令详解
    Mac OS X 11中的/usr/bin 的“Operation not permitted”
    Warning: mysql_connect(): No such file or directory 解决方案总结(操作系统: Mac)
    页面组件渲染小组件(重点)
    Vue 路由
  • 原文地址:https://www.cnblogs.com/into/p/4207111.html
Copyright © 2011-2022 走看看