博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
知乎布局||offsetTop||侧边栏自动等高
阅读量:5354 次
发布时间:2019-06-15

本文共 1798 字,大约阅读时间需要 5 分钟。

1.对a标签的详细介绍

直接在a标签使用onclick,怎么去除a的默认链接,οnclick="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.offsetParentwhile(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.lengthreturn width*(fontSize/2);}

6:动态作用域

动态作用域是this的表亲

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

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

function foo() {console.log(a)}function bar() {var a = 3;foo()}var a=2bar();//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);

转载于:https://www.cnblogs.com/heyinwangchuan/p/6086838.html

你可能感兴趣的文章
【Qt】Qt Linguist介绍【转】
查看>>
sim usim Uim 区别
查看>>
网页中插入透明Flash的方法和技巧
查看>>
动态内存申请函数选择(realloc、malloc 、alloca、 calloc)
查看>>
获取元素属性get_attribute
查看>>
视觉设计师的进化
查看>>
Python/jquery
查看>>
【BZOJ】【2132】圈地计划
查看>>
Lua 语言基本语法
查看>>
ARM 的Thumb状态测试
查看>>
windows下读取utf-8文件
查看>>
apache 启动不了的排查方法
查看>>
Java有没有goto?
查看>>
(转)makefile 的用法
查看>>
求不相邻金币相加和的最大值--动态规划1
查看>>
[转][osg]探索未知种族之osg类生物【目录】
查看>>
四十九. Zabbix报警机制 、 Zabbix进阶操作 、 监控案例
查看>>
元类中__new__ 与 __init__的区别--day27
查看>>
占小狼的简书博客
查看>>
struts2__action执行顺序
查看>>