前端常见面试题及方案解决

登录  注册

下载豆瓣客户端

豆瓣 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 前端 3 html兼容 1 后端 1 js 1 定义 1 html5 1 ...

id="dale_personal_note_middle_right_frame" frameborder="0" scrolling="no" width="300" height="250" name="CPM" style="overflow: hidden; margin: 0px 0px 20px;">

推荐这篇日记的豆列  · · · · · ·  ( 全部 )

• 小小晓的日记

id="dale_personal_note_bottom_super_banner_frame" frameborder="0" scrolling="no" width="950" height="90" name="CPC" style="overflow: hidden; margin: 40px 0px 0px;">

© 2005－2015 douban.com, all rights reserved 关于豆瓣 · 在豆瓣工作 · 联系我们 · 免责声明 · 帮助中心 · 移动应用 · 豆瓣广告