1.对a标签的详细介绍

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

百度

2.获取元素节点操作

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

百度

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


.left{float:left;padding-bottom:2000px;margin-bottom:-2000px;width:200px;background:#ddd;}
.center{float:left;margin:0 210px 0 420px;height:600px;background:#0f0;}
.right{float:right;padding-bottom:2000px;margin-bottom:-2000px;width:400px;background:#f00;}

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

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


*{margin:0;padding:0;}
.content{width:100%; float: left;}
.inner{margin:0 auto;width:700px;}
.content_inner{
margin-right: 328px
}
.left{float:left;width:30px;height:30px;background-color:#ff0;}
.right{margin-left:40px;}
.zu-main-sidebar {
float: left;
margin-left:-270px;
width: 270px;
background-color:#ddd;
}
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);

知乎布局||offsetTop||侧边栏自动等高的更多相关文章

  1. 并列div自动等高

    并列div自动等高 方法一:css控制 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理

    在我自己的<Web开发框架>中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹 ...

  3. Redis主从配置及通过Keepalived实现Redis自动切换高可用

    Redis主从配置及通过Keepalived实现Redis自动切换高可用 [日期:2014-07-23] 来源:Linux社区  作者:fuquanjun [字体:大 中 小]   一:环境介绍: M ...

  4. 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  5. 动态布局--动态修改RelativeLayout宽高的方法

    本文实例讲述了Android编程动态修改RelativeLayout宽高的方法.分享给大家供大家参考,具体如下: 我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改R ...

  6. mysql mha 主从自动切换 高可用

    mha(Master High Availability)目前在MySQL多服务器(超过二台),高可用方面是一个相对成熟的解决方案. 一,什么是mha,有什么特性 1. 主服务器的自动监控和故障转移 ...

  7. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. 【CSS】 布局之多列等高

    这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...

  9. 20191012——POI设置单元格自动行高(思路)

    在经过Jxls或者POI导出数据至excel中后,发现有的单元格内容太多,既没有自动换行,也没有自动增大行高.那如何通过Java代码来实现呢?请看下面步骤: (一)首先,将excel设置为最合适的行高 ...

随机推荐

  1. JS搞基指南----延迟对象入门提高资料整理

    JavaScript的Deferred是比较高大上的东西,  主要的应用还是主ajax的应用,  因为JS和nodeJS这几年的普及,  前端的代码越来越多,  各种回调套回调再套回调实在太让人崩溃, ...

  2. U盘装系统详细教程

    相信有的朋友去电脑城组装电脑的时候,会看见装机人员安装系统不再需要光驱,而插入U盘安装系统,U盘安装系统方便了许多,电脑光驱容易坏,使用寿命短,一般老电脑的光驱都不怎么好使,而U盘就不需要光驱就能安装 ...

  3. 单例模式:Instance

    前言: 学习面向对象程序设计的朋友应该知道,我们大多数情况下通过 new 操作来实例化对象的.对于一些仅需要一次初始化的对象来说,频繁的new操作无疑会过多浪费内存空间.基于此,单例模式便应运而生了. ...

  4. Leetcode # 169, 229 Majority Element I and II

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  5. HTLM4与HTML5的区别

    准确的说应该是HTML4与HTML5的区别 主要区别: 1.doctype头的改变 2.html5中多出了很多标签和属性 还有一个要注意的是,我们通常说html5时会自动关联上css3,其实我理解的, ...

  6. Linux_LVM_磁盘扩容

    场景描述: 安装操作系统的时候,做了LVM,应用软件基本装在了“/”目录下,服务器运行一段时间后,该目录下的存储空间使用紧张,现利用LVM对其进行磁盘空间扩容. 注:安装系统的时候需要做逻辑卷管理,保 ...

  7. [NOIP2014] 提高组 洛谷P1328 生活大爆炸版石头剪刀布

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  8. crawler:简要了解一下PhantomJS

    有时,我们需要浏览器处理网页,但并不需要浏览,比如生成网页的截图.抓取网页数据等操作.PhantomJS的功能,就是提供一个浏览器环境的命令行接口,你可以把它看作一个“虚拟浏览器”,除了不能浏览,其他 ...

  9. Irrelevant Elements, ACM/ICPC NEERC 2004, UVa1635

    这种题目最重要的是思路了清晰 #include <cstdio> #include <cstring> ;//sqrt(n)+1 is enough ][]; ]; int a ...

  10. CSS基础知识真难啊-浮动

    无浮动 <ul style="width: 440px;"> <li id="myli" style="border: 4px so ...