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

  • 相关阅读:
    CGFloat,CGPoint,CGSize,CGRect
    对discuz的代码分析学习(三)mysql驱动
    对discuz的代码分析学习(二)首页文件
    对discuz的代码分析学习(一)目录结构
    获取HTML DOM
    html中如何使用特殊字体
    如何让元素自动居中
    前端分页
    页面缩放scale
    控制台获取当前年的月份列表
  • 原文地址:https://www.cnblogs.com/into/p/4207111.html
Copyright © 2011-2022 走看看