题目1: 写一个函数,批量操作 css
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
题目2: 如何获取 DOM 计算后的样式
使用getComputedStyle获取元素计算后的样式
题目3: 实现此效果
题目4: onlick与addEventListener的区别?
- oncllick:绑定事件监听器,也是DOM0级事件监听方法。
优点:简单且具有跨浏览器优势。
缺点:通常将一个方法赋值给一个元素的事件处理程序属性,也就意味着这个方法可以被新的方法覆盖,一个时间只能绑定一次。
移除事件处理程序:只需把onclick属性赋值为null即可。
btn.onclick = function(){}
- addEventListener:是DOM2级事件处理程序。
能够接受三个参数- 事件处理类型
- 事件处理方法
- 布尔参数(在不会阶段调用事件处理程序为true,在事件冒泡阶段处理为false)
优点:能够绑定多个处理程序,会按照顺序依此执行。
缺点:不具备跨浏览器优势。
移除事件处理程序:只能通过removeEventListener移除,移除时参数与添加的时候相同。
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);
题目5: 解释DOM2事件传播机制?
DOM2级事件传播机制包括三个阶段
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
首先发生的是事件捕获,为截取事件提供机会,然后是实际目标接收事件,最后是冒泡阶段
题目6:有如下代码,要求当点击每一个元素<li>
时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
//...
</script>
题目7: 补全代码,要求:
- 当点击按钮开头添加时在
<li>
这里是</li>
元素前添加一个新元素,内容为用户输入的非空字符串;当点击结尾添加时在最后一个<li>
元素后添加用户输入的非空字符串。 - 当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>
预览地址
题目8: 补全代码,要求:当鼠标放置在<li>
元素上,会在img-preview
里展示当前li
元素的data-img
对应的图片。
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>
预览地址
网友评论