zoukankan      html  css  js  c++  java
  • 知乎布局||offsetTop||侧边栏自动等高

    1.对a标签的详细介绍

    直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接通过return false组织程序的链接的跳转

    百度
    

    2.获取元素节点操作

    onclick;通过调用阻止默认事件防止链接跳转

    百度
    

    3:纯CSS实现侧边栏 分栏高度自动相等

    
    
    
    

    4:知乎主页的布局方式(淘宝首页也使用这种写法)

    这个布局的实现方式 1:参照下面代码解释:首先你需要把代码放在一个容器吗,如下放在了inner使布局在中间 2:开始布局:content是主布局 ;设置其宽度为100%,设置浮动:float:left;在content中设置margin-right留出sidebar的位置 3:和content同级的下面div;设置属性 float:left;设置sidebar的宽度,width:270px;设置margin-left:-270px;

    
    
    
    
    bbb

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    ccc

    33333

    5:元素相对于窗口的距离

    元素相对于窗口的距离,在position:absolute;实现实时定位中的应用非常的广泛,如自制下拉框,搜索框

    //获取元素的纵坐标(相对于窗口)
    function getTop(e){ var actualTop=e.offsetTop; if(e.offsetParent!=null)
    actualTop+=getTop(e.offsetParent); return actualTop;
    }
    function getLeft(e){
    var actualLeft=e.offsetLeft;
    var current=e.offsetParent
    while(current){
    actualLeft+=current.offsetLeft;
    current=current.offsetParent;
    }
    return actualLeft;
    }
    //获得字符串的宽度 汉字为两个字符,英文为一个字符
    function getStringWidth(str ,fontSize) {
    var width=0;
    for(var i=0; i < str.length; i++) {
    str[i]=str[i].replace('s+', '');
    if(str.charCodeAt(i) >= 255) {
    width++;
    }
    }
    width+=str.length
    return width*(fontSize/2);
    }
    

    6:动态作用域

    动态作用域是this的表亲

    动态作用域似乎暗示有很好的理由让作用域作为一个在运行中就被动态确定的形式,而不是在写代码时进行静态确定的形式

    此法作用域是在写代码的时候或者在定义时确定的,而动态作用域是在运行时确定的,词法作用域和动态作用域之间的关系多么紧密。

    function foo() {
    console.log(a)
    }
    function bar() {
    var a = 3;
    foo()
    }var a=2
    bar();//2
    

    7:获取节点的style

    通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了

    DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle

    特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的'#ffffff',而FF返回的是#ffffff

    var oStyle = this.currentStyle? this.currentStyle : window.getComputedStyle(this, null);
    alert(oStyle.fontWeight);
    
  • 相关阅读:
    solaris 10 root忘记密码的解决方法
    c程序设计--指针与数组
    photoshop之色阶的使用
    Handling Errors Exceptionally Well in C++ 在C++中良好地捕获意外的错误
    自动换行 wordbreak:breakall和wordwrap:breakword
    透明度
    position:fixed在IE6下的实现
    JavaScript教程:常用DOM操作方法,JavaScriptDOM基本操作
    30 个免费的 UI 工具箱
    去掉虚线框兼容所有浏览器
  • 原文地址:https://www.cnblogs.com/heyinwangchuan/p/6086838.html
Copyright © 2011-2022 走看看