前端常见面试题及方案解决
2015-12-26 18:02
656 查看
登录 注册
下载豆瓣客户端
豆瓣 3.0 全新发布×
豆瓣
读书
电影
音乐
同城
小组
阅读
FM
东西
市集
更多
豆瓣社区
首页
浏览发现
移动应用
游戏
线上活动
小小晓 2015-03-03
13:57:09
HTML+CSS
1、盒子模型，块级元素和行内元素特性与区别。
------------内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性.
-----------它指定元素如何显示以及如何相互交互
-----------块级元素：块状元素排斥其他元素与其位于同一行
-----------行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
2、行内块的使用，兼容性解决。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
3、清除浮动的方式以及各自的优劣。
----------1、采用伪类:after进行后续空制的高度位零的伪类层清除
---------- 优点：结构语义化完全正确，不会产生其余的怪异问题。
---------- 缺点：复用方式不当容易造成代码量急剧增大。
---------- 建议：最外层轻浮动时使用，或清晰模块化复用方式的人使用。
--------------------------------------------------------------------------------------------------------------------------------------------
----------2、采用css overflow:auto的方式撑高
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（ff）；或者在mouseo教程ver造成宽度改变时会出现最外层模块有滚动条（ie）。
---------- 建议：内个模块使用，请勿嵌套。
--------------------------------------------------------------------------------------------------------------------------------------------
----------3、采用css overflow:hidden的方式产生怪异适应
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：内容增多时候极易不会自动换行而内容被隐藏掉。
---------- 建议：宽度固定时使用，请勿嵌套。
--------------------------------------------------------------------------------------------------------------------------------------------
----------4、采用display:table将对象变成table形式
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
---------- 建议：如果你不想改bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
--------------------------------------------------------------------------------------------------------------------------------------------
----------5、采用div标签，以及css的clear属性
---------- 优点：代码量极少，复用性极高。
---------- 缺点：完全不能完美的适应语义化，不利于改版以及需求变更。
---------- 建议：初学者使用，可以让你快速的解决浮动问题。
--------------------------------------------------------------------------------------------------------------------------------------------
----------6、采用br标签，以及css的clear属性
---------- 优点：语义化程度比第5种情况要更优；代码量极少，复用性极高。
---------- 缺点：语义化依旧不完美，不利于改版以及需求变更。
---------- 建议：初学者使用，可以让你快速的解决浮动问题。
--------------------------------------------------------------------------------------------------------------------------------------------
----------7、采用br标签，以及其自身html的clear属性
---------- 优点：语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
---------- 缺点：语义化依旧不完美，不利于改版以及需求变更。
---------- 建议：引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到web1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。
---------文档中可显示对象在排列时所占用的位置
---------使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位.
相对定位：即相对于元素在文档流中位置进行偏移. 但保留原占位.
绝对定位：即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位：即完全脱离文档流, 相对于视区进行偏移.
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
5、CSS选择器以及优先级计算。
--------CSS的优先级由高到低分为六组：
---------------1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
---------------2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
---------------3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
---------------4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
---------------5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
---------------6、最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
--------CSS选择器优先级
---------------1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
---------------2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
---------------3、第三级的优先属性由<link/>标签所引入的样式表定义。
---------------4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
---------------5、第五级优先的样式有用户设定。
---------------6、最低级的优先权由浏览器默认。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
6、常用的CSS hack。
-------IE6-IE11,Firefox/Safari/Opera/Chrome
-------目前最常见的是
---------------*html *前缀只对IE6生效
---------------*+html *+前缀只对IE7生效
---------------@media screen\9{...}只对IE6/7生效
---------------@media \0screen {body { background: red; }}只对IE8有效
---------------@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
---------------@media screen\0 {body { background: green; }} 只对IE8/9/10有效
---------------@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
---------------@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
---------------IE6，识别_，识别*，不识别!important
---------------IE7，识别*，识别!important，不识别_
---------------Firefox，识别!important，不识别_，不识别*
---------------“-″减号是IE6专有的hack
---------------“\9″ IE6/IE7/IE8/IE9/IE10都生效
---------------“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
---------------“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
7、遇到的兼容性问题与解决方法。
----------问题一：不同浏览器的标签默认的外补丁和内补丁不同
---------- 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
---------- 解决方案：CSS里 *{margin:0;padding:0;}
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
---------- 问题症状:常见症状是IE6中后面的一块被顶到下一行
---------- 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
---------- 问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
---------- 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，-IE6间距bug
---------- 问题症状：IE6里的间距比超过设置的间距
---------- 解决方案：在display:block;后面加入display:inline;display:table;
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题五：图片默认有间距
---------- 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
---------- 解决方案：使用float属性为img布局
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题六：标签最低高度设置min-height不兼容
---------- 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
---------- 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题七：透明度的兼容CSS设置
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
8、垂直水平居中的实现方式。
1、单行垂直居中
文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
<div style="line-height:500px;height:500;">
--------------------------------------------------------------------------------------------------------------------------------------------
2、层水平居中
设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}
--------------------------------------------------------------------------------------------------------------------------------------------
3、层中的文字水平居中
在childdiv的css加上text-align:center;
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}
--------------------------------------------------------------------------------------------------------------------------------------------
4、div层垂直居中
<div style="width:275px;height:375px;border: solid red;">
<div style="background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="background:red;position:static;position:absolute\9; top: 50%;">
<div style="background:blue;position: relative; top: -50%;">
book.chinaz.com
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
5、div层垂直水平居中，英文超长换行
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style="height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; text-align: center;">
<div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
6、div垂直滚动
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">
book.chinaz.com
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
7、垂直居中和使用text-align水平居中
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9;top: 50%;">
<div style="position: relative; top: -50%; text-align:center;">
<div style="width: 275px;">
<div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
8、垂直居中和使用margin水平居中
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; ">
<div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
Javascript
1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
2、常用的浏览器内核。
--------使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
--------使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
--------使用Presto内核的浏览器：Opera7及以上版本；
--------使用Webkit内核的浏览器：Safari、Chrome。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
3、常用的DOM操作，新建、添加、删除、移动、查找等。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
4、String于Array常用方法。
2.1、字符与字符串
在String类中提供了以下的方法操作字符与字符串间的转换关系：
|-根据字符串中提供的索引找到指定位置的字符：public char charAt(int index)
|-将字符串变为字符数组：public char[] toCharArray()
|-将字符数组变为字符串：
|-将全部的字符数组变为String类型：public String(char[] value)
|-将部分的字符数组变为String类型：” public String(char[] value,int offset,int count)
范例：取出字符串中制定位置的字符
public class StringAPIDemo01
{
public static void main(String args[])
{
String str = "hello" ;
char c = str.charAt(2) ;
System.out.println(c) ;
}
}
范例：字符串 –-> 字符数组
public class StringAPIDemo02
{
public static void main(String args[])
{
String str = "hello world !!!!!#@" ;
char c[] = str.toCharArray() ;
for (int i = 0 ; i < c.length ; i++ )
{
System.out.print(c[i] + "、" ) ;
}
String str1 = new String(c) ;
String str2 = new String (c,0,5) ;
System.out.println("\n"+str1) ;
System.out.println(str2) ;
}
}
2.2、字节与字符串
与字符数组的操作一致，一个字符串也可以变为字节数组，一个字节数组也可以变为字符串：
|-String à字节数组：public byte[] getBytes()
|-字节数组 àString
|-全部：public String(byte[] bytes)
|-部分：public String(byte[] bytes,int offset,int length)
范例：字节数组 à字符串
public class StringAPIDemo03
{
public static void main(String args[])
{
String str = "hello world !!!!!#@" ;
byte b[] = str.getBytes() ; //将字符串变为字节数组
String str1 = new String(b) ;
String str2 = new String (b,0,5) ;
System.out.println("\n"+str1) ;
System.out.println(str2) ;
}
}
2.3、判断是否以指定的字符串开头或结尾
|-判断是否以指定的字符串开头：public boolean startsWith(String prefix)
|-判断是否以指定的字符串结尾public boolean endsWith(String suffix)：
范例：验证操作
public class StringAPIDemo04
{
public static void main(String args[])
{
String str = "**hello world ##" ;
System.out.println(str.startsWith("**")) ;
System.out.println(str.endsWith("##")) ;
}
}
2.4、替换操作
使用以下的方法可以完成替换的操作：
|-public String replaceAll(String regex,String replacement)
范例：替换内容
public class StringAPIDemo05
{
public static void main(String args[])
{
String str = "hello world " ;
String newStr = str.replaceAll("l","x") ;
System.out.println(newStr) ;
}
}
2.5、字符串的截取
使用以下两种方法可以完成字符串的截取操作：
|-全部截取：public String substring(int beginIndex)
|-部分截取：public String substring(int beginIndex,int endIndex)
范例：验证操作
public class StringAPIDemo06
{
public static void main(String args[])
{
String str = "hello world " ;
String sub1 = str.substring(6) ; //从第六个字符开始截取
String sub2 = str.substring(0,5) ; //从第一个字符截取到第五个字符
System.out.println(sub1) ;
System.out.println(sub2) ;
}
}
2.6、字符串的拆分
可以将字符串按照指定的内容进行拆分操作：
|-public String[] split(String regex)
范例：拆分字符串
public class StringAPIDemo07
{
public static void main(String args[])
{
String str = "hello world " ;
String s[] = str.split(" ") ;
for (String st :s)
{
System.out.println(st) ;
}
}
}
2.7、字符串查找
如果需要在一个字符串中查找是否存在指定的内容，可以使用以下的两个方法：
|-取得指定字符串的位置：public int indexOf(int ch)，public int indexOf(int ch, int fromIndex)
|-此方法返回int型数据，如果查到了则返回位置，查不到，返回-1 ；
|-直接查找：public boolean contains(String s)
范例：查找操作
public class StringAPIDemo08
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.contains("hello")) ; //ture
System.out.println(str.contains("aust")) ; //false
}
}
范例：查找位置
public class StringAPIDemo09
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.indexOf("hello")) ;
System.out.println(str.indexOf("aust")) ;
if((str.indexOf("aust")) != -1)
{
System.out.println("查找到所需的内容。");
}
}
}
范例：指定查找的开始位置
public class StringAPIDemo10
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.indexOf("hello")) ;
System.out.println(str.indexOf("hello " , 6)) ;
}
}
2.8、字符串的其他操作
去掉左右空格：public String trim()
取的字符串长度：public int length()
转大写：public String toUpperCase()
转小写：public String toLowerCase()
范例：
public class StringAPIDemo11
{
public static void main(String args[])
{
String str = " hello world " ;
System.out.println(str.trim()) ;
System.out.println(str.trim().length());
System.out.println(str.trim().toUpperCase()) ;
}
}
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
5、设备与平台监测。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
9、对HTTP协议的理解。
----------超文本传输协议
---------所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
10、Ajax的常用操作，JS跨域的实现原理。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
考查要点：
对Web标准的理解
Web标准不是某一个标准，而是由一系列标准组合而成。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和HTML以及XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准。
1．结构标准语言
（1）、XML
（2）、XHTML
2.表现标准语言
3.行为标准
（1）、DOM
(2) 、ECMAScript
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
浏览器差异
FF、Chrome:没有window.event对象
FF、Chrome:没有window.event对象，只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成：function handle(e){e = e || event;}
获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
自定义属性问题
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
Ajax请求
IE: new ActiveXObject()
FF、Chrome：new XMLHttpRequest()
获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
innerText的使用
FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。
if(document.all){
document.getElementById('element').innerText = "mytext";
} else{
document.getElementById('element').textContent = "mytext";
}
获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于Firefox，IE会有更在的不同，这种方法本身就是有BUG的。
在IE中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;
获取可见区域、窗口的大小
有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为"可见区域"。
在IE中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
Alpha 透明
这并不是一个JavaScript句法问题，而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现，这是通过访问CSS的Alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下：:
在IE中这样写：
#myElement { filter: alpha(opacity=50); }
在Firefox中这样写：
#myElement { opacity: 0.5; }
在IE中这样写：
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
在Firefox中这样写：
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
CSS "float" 值
访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为"header"的<div>的 background-color值，我们使用如下句法：
document.getElementById("header").style.backgroundColor= "#ccc";
但由于"float"这个词是一个JavaScript保留字，因此我们不能用object.style.float来访问，这里，我们可以在两种浏览器中这么做：
在IE中这样写：
document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写：
document.getElementById("header").style.cssFloat = "left";
元素的推算样式
JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式，我们可以使用下面的代码：
在IE中这样写：
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写：
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
访问元素的"class"
"class"是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问"class"。
在IE中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
在Firefox中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
CSS基本功：布局、盒模型、选择器优先级及使用等
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
Javascript 基础、JS面向对象实现原理、闭包机制、作用域
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
如果是我，我会问“js如何实现多重继承”，然后再由这个问题联系到原型链，new机制，函数，作用域链，this，闭包，这些问题可以看出应聘者是不是真正会js还是披着java/c++外衣以为会js。再高级的我会问js设计模式，mvc模式。
1. 主体是看简历发挥，对方写什么就问什么为主：框架、库、浏览器工作原理、NLP、算法、HTTP...
2. 辅助问题几乎是我个人必备的问题：为什么做前端，学习前端过程。
分享到微信
标签： 前端
推荐
1人 喜欢 喜欢
回应 推荐 喜欢
>
我来回应
小小晓
喜欢漂亮却不喜欢打扮，喜欢收集缺没办法购买~~ 人生就会有得失
CSS书写规范、顺序
忐忑
2015/4/28
html5
浏览器内核差异
html
4前端
3html兼容
1后端
1js
1定义
1html5
1...
© 2005－2015 douban.com, all rights reserved关于豆瓣 · 在豆瓣工作 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · 豆瓣广告
下载豆瓣客户端
豆瓣 3.0 全新发布×
豆瓣
读书
电影
音乐
同城
小组
阅读
FM
东西
市集
更多
豆瓣社区
首页
浏览发现
移动应用
游戏
线上活动
前端的面试题
小小晓 2015-03-03
13:57:09
HTML+CSS
1、盒子模型，块级元素和行内元素特性与区别。
------------内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性.
-----------它指定元素如何显示以及如何相互交互
-----------块级元素：块状元素排斥其他元素与其位于同一行
-----------行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
2、行内块的使用，兼容性解决。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
3、清除浮动的方式以及各自的优劣。
----------1、采用伪类:after进行后续空制的高度位零的伪类层清除
---------- 优点：结构语义化完全正确，不会产生其余的怪异问题。
---------- 缺点：复用方式不当容易造成代码量急剧增大。
---------- 建议：最外层轻浮动时使用，或清晰模块化复用方式的人使用。
--------------------------------------------------------------------------------------------------------------------------------------------
----------2、采用css overflow:auto的方式撑高
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（ff）；或者在mouseo教程ver造成宽度改变时会出现最外层模块有滚动条（ie）。
---------- 建议：内个模块使用，请勿嵌套。
--------------------------------------------------------------------------------------------------------------------------------------------
----------3、采用css overflow:hidden的方式产生怪异适应
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：内容增多时候极易不会自动换行而内容被隐藏掉。
---------- 建议：宽度固定时使用，请勿嵌套。
--------------------------------------------------------------------------------------------------------------------------------------------
----------4、采用display:table将对象变成table形式
---------- 优点：结构语义化完全正确，代码量极少。
---------- 缺点：盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
---------- 建议：如果你不想改bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
--------------------------------------------------------------------------------------------------------------------------------------------
----------5、采用div标签，以及css的clear属性
---------- 优点：代码量极少，复用性极高。
---------- 缺点：完全不能完美的适应语义化，不利于改版以及需求变更。
---------- 建议：初学者使用，可以让你快速的解决浮动问题。
--------------------------------------------------------------------------------------------------------------------------------------------
----------6、采用br标签，以及css的clear属性
---------- 优点：语义化程度比第5种情况要更优；代码量极少，复用性极高。
---------- 缺点：语义化依旧不完美，不利于改版以及需求变更。
---------- 建议：初学者使用，可以让你快速的解决浮动问题。
--------------------------------------------------------------------------------------------------------------------------------------------
----------7、采用br标签，以及其自身html的clear属性
---------- 优点：语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
---------- 缺点：语义化依旧不完美，不利于改版以及需求变更。
---------- 建议：引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到web1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。
---------文档中可显示对象在排列时所占用的位置
---------使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位.
相对定位：即相对于元素在文档流中位置进行偏移. 但保留原占位.
绝对定位：即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移
固定定位：即完全脱离文档流, 相对于视区进行偏移.
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
5、CSS选择器以及优先级计算。
--------CSS的优先级由高到低分为六组：
---------------1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
---------------2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
---------------3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
---------------4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
---------------5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
---------------6、最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
--------CSS选择器优先级
---------------1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
---------------2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
---------------3、第三级的优先属性由<link/>标签所引入的样式表定义。
---------------4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
---------------5、第五级优先的样式有用户设定。
---------------6、最低级的优先权由浏览器默认。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
6、常用的CSS hack。
-------IE6-IE11,Firefox/Safari/Opera/Chrome
-------目前最常见的是
---------------*html *前缀只对IE6生效
---------------*+html *+前缀只对IE7生效
---------------@media screen\9{...}只对IE6/7生效
---------------@media \0screen {body { background: red; }}只对IE8有效
---------------@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
---------------@media screen\0 {body { background: green; }} 只对IE8/9/10有效
---------------@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
---------------@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
---------------IE6，识别_，识别*，不识别!important
---------------IE7，识别*，识别!important，不识别_
---------------Firefox，识别!important，不识别_，不识别*
---------------“-″减号是IE6专有的hack
---------------“\9″ IE6/IE7/IE8/IE9/IE10都生效
---------------“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
---------------“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
7、遇到的兼容性问题与解决方法。
----------问题一：不同浏览器的标签默认的外补丁和内补丁不同
---------- 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
---------- 解决方案：CSS里 *{margin:0;padding:0;}
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
---------- 问题症状:常见症状是IE6中后面的一块被顶到下一行
---------- 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
---------- 问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
---------- 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，-IE6间距bug
---------- 问题症状：IE6里的间距比超过设置的间距
---------- 解决方案：在display:block;后面加入display:inline;display:table;
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题五：图片默认有间距
---------- 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
---------- 解决方案：使用float属性为img布局
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题六：标签最低高度设置min-height不兼容
---------- 问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
---------- 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
--------------------------------------------------------------------------------------------------------------------------------------------
----------问题七：透明度的兼容CSS设置
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
8、垂直水平居中的实现方式。
1、单行垂直居中
文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
<div style="line-height:500px;height:500;">
--------------------------------------------------------------------------------------------------------------------------------------------
2、层水平居中
设置div的宽度小于父div的宽度，设置 margin:0 auto;，即可让div居中。
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}
--------------------------------------------------------------------------------------------------------------------------------------------
3、层中的文字水平居中
在childdiv的css加上text-align:center;
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}
--------------------------------------------------------------------------------------------------------------------------------------------
4、div层垂直居中
<div style="width:275px;height:375px;border: solid red;">
<div style="background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="background:red;position:static;position:absolute\9; top: 50%;">
<div style="background:blue;position: relative; top: -50%;">
book.chinaz.com
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
5、div层垂直水平居中，英文超长换行
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style="height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; text-align: center;">
<div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
6、div垂直滚动
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">
book.chinaz.com
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
7、垂直居中和使用text-align水平居中
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9;top: 50%;">
<div style="position: relative; top: -50%; text-align:center;">
<div style="width: 275px;">
<div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
8、垂直居中和使用margin水平居中
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; ">
<div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
</div>
</div>
</div>
</div>
</div>
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等）。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
Javascript
1、犀牛书封面的犀牛属于神马品种？（蛋逼活跃气氛用。。。）
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
2、常用的浏览器内核。
--------使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
--------使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
--------使用Presto内核的浏览器：Opera7及以上版本；
--------使用Webkit内核的浏览器：Safari、Chrome。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
3、常用的DOM操作，新建、添加、删除、移动、查找等。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
4、String于Array常用方法。
2.1、字符与字符串
在String类中提供了以下的方法操作字符与字符串间的转换关系：
|-根据字符串中提供的索引找到指定位置的字符：public char charAt(int index)
|-将字符串变为字符数组：public char[] toCharArray()
|-将字符数组变为字符串：
|-将全部的字符数组变为String类型：public String(char[] value)
|-将部分的字符数组变为String类型：” public String(char[] value,int offset,int count)
范例：取出字符串中制定位置的字符
public class StringAPIDemo01
{
public static void main(String args[])
{
String str = "hello" ;
char c = str.charAt(2) ;
System.out.println(c) ;
}
}
范例：字符串 –-> 字符数组
public class StringAPIDemo02
{
public static void main(String args[])
{
String str = "hello world !!!!!#@" ;
char c[] = str.toCharArray() ;
for (int i = 0 ; i < c.length ; i++ )
{
System.out.print(c[i] + "、" ) ;
}
String str1 = new String(c) ;
String str2 = new String (c,0,5) ;
System.out.println("\n"+str1) ;
System.out.println(str2) ;
}
}
2.2、字节与字符串
与字符数组的操作一致，一个字符串也可以变为字节数组，一个字节数组也可以变为字符串：
|-String à字节数组：public byte[] getBytes()
|-字节数组 àString
|-全部：public String(byte[] bytes)
|-部分：public String(byte[] bytes,int offset,int length)
范例：字节数组 à字符串
public class StringAPIDemo03
{
public static void main(String args[])
{
String str = "hello world !!!!!#@" ;
byte b[] = str.getBytes() ; //将字符串变为字节数组
String str1 = new String(b) ;
String str2 = new String (b,0,5) ;
System.out.println("\n"+str1) ;
System.out.println(str2) ;
}
}
2.3、判断是否以指定的字符串开头或结尾
|-判断是否以指定的字符串开头：public boolean startsWith(String prefix)
|-判断是否以指定的字符串结尾public boolean endsWith(String suffix)：
范例：验证操作
public class StringAPIDemo04
{
public static void main(String args[])
{
String str = "**hello world ##" ;
System.out.println(str.startsWith("**")) ;
System.out.println(str.endsWith("##")) ;
}
}
2.4、替换操作
使用以下的方法可以完成替换的操作：
|-public String replaceAll(String regex,String replacement)
范例：替换内容
public class StringAPIDemo05
{
public static void main(String args[])
{
String str = "hello world " ;
String newStr = str.replaceAll("l","x") ;
System.out.println(newStr) ;
}
}
2.5、字符串的截取
使用以下两种方法可以完成字符串的截取操作：
|-全部截取：public String substring(int beginIndex)
|-部分截取：public String substring(int beginIndex,int endIndex)
范例：验证操作
public class StringAPIDemo06
{
public static void main(String args[])
{
String str = "hello world " ;
String sub1 = str.substring(6) ; //从第六个字符开始截取
String sub2 = str.substring(0,5) ; //从第一个字符截取到第五个字符
System.out.println(sub1) ;
System.out.println(sub2) ;
}
}
2.6、字符串的拆分
可以将字符串按照指定的内容进行拆分操作：
|-public String[] split(String regex)
范例：拆分字符串
public class StringAPIDemo07
{
public static void main(String args[])
{
String str = "hello world " ;
String s[] = str.split(" ") ;
for (String st :s)
{
System.out.println(st) ;
}
}
}
2.7、字符串查找
如果需要在一个字符串中查找是否存在指定的内容，可以使用以下的两个方法：
|-取得指定字符串的位置：public int indexOf(int ch)，public int indexOf(int ch, int fromIndex)
|-此方法返回int型数据，如果查到了则返回位置，查不到，返回-1 ；
|-直接查找：public boolean contains(String s)
范例：查找操作
public class StringAPIDemo08
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.contains("hello")) ; //ture
System.out.println(str.contains("aust")) ; //false
}
}
范例：查找位置
public class StringAPIDemo09
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.indexOf("hello")) ;
System.out.println(str.indexOf("aust")) ;
if((str.indexOf("aust")) != -1)
{
System.out.println("查找到所需的内容。");
}
}
}
范例：指定查找的开始位置
public class StringAPIDemo10
{
public static void main(String args[])
{
String str = "hello world " ;
System.out.println(str.indexOf("hello")) ;
System.out.println(str.indexOf("hello " , 6)) ;
}
}
2.8、字符串的其他操作
去掉左右空格：public String trim()
取的字符串长度：public int length()
转大写：public String toUpperCase()
转小写：public String toLowerCase()
范例：
public class StringAPIDemo11
{
public static void main(String args[])
{
String str = " hello world " ;
System.out.println(str.trim()) ;
System.out.println(str.trim().length());
System.out.println(str.trim().toUpperCase()) ;
}
}
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
5、设备与平台监测。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
8、JS变量提升、匿名函数、原型继承、作用域、闭包机制等。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
9、对HTTP协议的理解。
----------超文本传输协议
---------所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
10、Ajax的常用操作，JS跨域的实现原理。
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
考查要点：
对Web标准的理解
Web标准不是某一个标准，而是由一系列标准组合而成。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和HTML以及XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准。
1．结构标准语言
（1）、XML
（2）、XHTML
2.表现标准语言
3.行为标准
（1）、DOM
(2) 、ECMAScript
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
浏览器差异
FF、Chrome:没有window.event对象
FF、Chrome:没有window.event对象，只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成：function handle(e){e = e || event;}
获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
自定义属性问题
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
Ajax请求
IE: new ActiveXObject()
FF、Chrome：new XMLHttpRequest()
获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)
innerText的使用
FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。
if(document.all){
document.getElementById('element').innerText = "mytext";
} else{
document.getElementById('element').textContent = "mytext";
}
获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于Firefox，IE会有更在的不同，这种方法本身就是有BUG的。
在IE中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;
获取可见区域、窗口的大小
有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为"可见区域"。
在IE中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
Alpha 透明
这并不是一个JavaScript句法问题，而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现，这是通过访问CSS的Alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下：:
在IE中这样写：
#myElement { filter: alpha(opacity=50); }
在Firefox中这样写：
#myElement { opacity: 0.5; }
在IE中这样写：
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
在Firefox中这样写：
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
CSS "float" 值
访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为"header"的<div>的 background-color值，我们使用如下句法：
document.getElementById("header").style.backgroundColor= "#ccc";
但由于"float"这个词是一个JavaScript保留字，因此我们不能用object.style.float来访问，这里，我们可以在两种浏览器中这么做：
在IE中这样写：
document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写：
document.getElementById("header").style.cssFloat = "left";
元素的推算样式
JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式，我们可以使用下面的代码：
在IE中这样写：
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写：
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
访问元素的"class"
"class"是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问"class"。
在IE中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
在Firefox中这样写：
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
CSS基本功：布局、盒模型、选择器优先级及使用等
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
Javascript 基础、JS面向对象实现原理、闭包机制、作用域
————————（づ￣3￣）づ╭❤～——O(∩_∩)O—（づ￣3￣）づ╭❤～—————————
如果是我，我会问“js如何实现多重继承”，然后再由这个问题联系到原型链，new机制，函数，作用域链，this，闭包，这些问题可以看出应聘者是不是真正会js还是披着java/c++外衣以为会js。再高级的我会问js设计模式，mvc模式。
1. 主体是看简历发挥，对方写什么就问什么为主：框架、库、浏览器工作原理、NLP、算法、HTTP...
2. 辅助问题几乎是我个人必备的问题：为什么做前端，学习前端过程。
分享到微信
标签： 前端
推荐
1人 喜欢 喜欢
回应 推荐 喜欢
>
我来回应
小小晓
喜欢漂亮却不喜欢打扮，喜欢收集缺没办法购买~~ 人生就会有得失
小小晓的最新日记 · · · · · · ( 全部 )
CSS书写规范、顺序忐忑
2015/4/28
html5
浏览器内核差异
小小晓的日记标签 · · · · · · ( 全部 )
html4前端
3html兼容
1后端
1js
1定义
1html5
1...
推荐这篇日记的豆列 · · · · · · ( 全部 )
小小晓的日记© 2005－2015 douban.com, all rights reserved关于豆瓣 · 在豆瓣工作 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · 豆瓣广告
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 我对“中文编程”是否是解决中国程序员编程效率的“银弹”的看法
- 程序员如何做到『编程速度又快，Bug 数量又少』？
- 黑马程序员--多线程基础知识
- 71道经典Android面试题和答案--重要知识点都涉及到了
- Java 常用排序算法/程序员必须掌握的 8大排序算法
- Erlang不能错过的盛宴 -----一位Erlang程序员的自白
- 面试大全
- 【剑指offer】2.4.1查找和排序——面试题8：旋转数组的最小数字
- 黑马程序员——java基础之面向对象
- 关于中文编程是解决中国程序员效率的秘密武器的问题思考
- 程序员能力培养
- 程序员应该具有的品德与修为
- iOS开发面试题整理
- 2015年职场人薪资惬意度调查报告
- 程序员晋升攻略
- 面试题6 将一个n*n图像矩阵顺时针旋转90°
- 职业生涯，路在何方？
- utips面试小记
- 我的职场和代码重构
- Android面试题总结加强再加强版（三）