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];
    }
    }

  • 相关阅读:
    [LeetCode in Python] 98 (M) validate binary search tree 验证二叉搜索树
    [LeetCode in Python] 79 (M) word search 单词搜索
    mybatis3源码阅读之SqlSessionFactoryBuilder
    java简单的双色球摇号程序
    低延时直播应用 流媒体
    glPixelStorei 详解 包括像素传输
    depth/stencil buffer的作用 ----------理解模板缓存 opengl
    实用网站汇编
    利用CodeBlocks结合freeglut快速搭建OpenGL开发环境
    opengl 4.5 中文api 链接
  • 原文地址:https://www.cnblogs.com/into/p/4207111.html
Copyright © 2011-2022 走看看