说明:我的只是整理,题目也是从网上搜集的,到底是不是百度的笔试题,不得而知
1.请写出至少三个CSS3中新添加的样式属性的名字
border-radius : 兼容: -webkit-border-radius , -moz-border-radius ,border-radius box-shadow: 四个参数: x-offset(x轴的偏移),y-offset(y轴的偏移),blur(模糊值),color of shodow(阴影颜色) text-shadow : 也是四个参数,同box-shadow text-overflow : clip / ellipsis transition: word-wrap: (自动换行) resize : text-stroke:
既然写了CSS3,顺便总结一下html5
新增的html5标签:(更加偏向于语义化)
<header> , <section> , <article> , <nav> , <hgroup> , <figure> ,<footer> , <canvas> ,<embed > <video> < audio> <dialog> ,<ruby><rp><rt>
<progress>
删除的html5标签:
第一类:(纯表现类) basefont ,big , center, font , tt ,u s,strike
第二类:(对可用性产生负面影响)frame ,frameset , noframes
第三类:(产生混淆的元素) acronym ,applet ,isindex , dir
2.写出IE浏览器跟非IE浏览器在实现js上存在哪些兼容性问题
1. ajax对象
非IE: var oAjax = new XMLHTTPRequest();
IE6 : var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
兼容写法: var oAjax = window.XMLHTTPRequest ? new XMLHTTPRequest() : new ActiveXObject("Microsoft.XMLHTTP");
2. 目标对象捕获
IE:event对象有srcElement属性
非IE:有target属性
兼容代码:使用 var obj = event.srcElement ? event.srcElement : event.target;
3. 事件监听
IE : attachEvent(事件名称,绑定的函数)
非IE : addEventListener(事件名称,绑定函数,是否在捕获阶段捕获)
addEventListener的第三个参数:
设为true时: 在捕获阶段将元素捕获
设为false时:在冒泡阶段将目标元素捕获
事件模型:
先介绍一下两个概念:
事件捕获:事件从根节点(document)开始,逐级派送到子节点,若到达的子节点绑定了该事件,则执行动作,然后继续往更小的子节点派送,直至没有子节点;
事件冒泡:事件先从子节点(目标元素),逐渐向父节点派送,直至document;
DOM事件模型:同时支持两种事件模型,捕获事件和冒泡事件,但是先 捕获 然后 冒泡。
IE事件模型:只支持冒泡;
W3C模型: 任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素;
然后再从事件源元素上进行事件冒泡,直到到达document.
W3C事件模式是 DOM事件模型 和 IE事件模型的 综合咯!
DOM事件模型: 从document开始 ,也在document对象结束。
兼容写法:
function myAddEvent ( obj, ev ,fn )
{
if ( obj.attachEvent )
{
obj.attachEvent("on"+ ev ,fn);
}
else
{
obj.addEventListener( ev , fn , true /false);
}
} 4.滚动条的滚动距离
IE/FF : document.documentElement.scrollTop ;
Chrome:document.body.scrollTop ;
兼容代码:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ;
5.获取非行间样式
IE : obj.currentStyle[ attributeName ]
非IE : getComputed( obj, false)[name]
兼容:
var attribute = obj.currentStyle ? obj.currentStyle[name] : getComputedStyle( obj , false)[name]
6.事件对象
IE : 有window.event对象
非IE : 没有window.event对象。解决办法:可以通过给函数参数传递event对象。如onmousemove=doMouseMove(event)
兼容代码:var event = event || window.event;