写一个函数，批量操作 css
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
// 解答
<body>
<p>NinthG</p>
<script>
var body = document.querySelector('body') // 简化代码，将选中的body元素赋值给body
function css(node,styleObj){
for (var key in styleObj){
node.style[key] = styleObj[key]
}
// 遍历styleObj中的值，并将其赋值给操作元素
}
</script>
</body>
如何获取 DOM 计算后的样式
使用getComputedStyle方法获取
<body>
<p style="color:black">NinthG</p>
<script>
var p = document.querySelector('p')
p.style.color = 'red'
console.log(getComputedStyle(p).color)
</script>
</body>
// 输出结果
rgb(255, 0, 0)
实现效果
onlick与addEventListener的区别？
-
onlick无法处理同一个元素的多个绑定事件，而addEventListener可以
举例说明：
<body>
<p class="name">NinthG</p>
<script>
var p = document.querySelector('.name')
p.onclick = function(){
console.log(this.innerText)
}
p.onclick = function(){
console.log("这是最新的")
}
p.addEventListener('click', function(){
console.log('addEventListener方法第1次打印')
})
p.addEventListener('click', function(){
console.log('addEventListener方法第2次打印')
})
</script>
</body>
// 输出结果
"这是最新的" // 两次onclick事件，最近执行的覆盖了前面的
"addEventListener方法第1次打印"
"addEventListener方法第2次打印"
解释DOM2事件传播机制？
DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
DOM事件流
- 首先发生的是事件捕获，为截获事件提供了机会
- 然后是实际的目标接收到事件
- 接着事件冒泡阶段对事件作出响应。
有如下代码
要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
//todo ...
</script>
//解答
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端14班</li>
</ul>
<script>
var li = document.querySelector('.ct')
li.addEventListener('click', function(li){
console.log(li.target.innerText)
})
</script>
</body>
补全代码
要求：
- 当点击按钮开头添加时在<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>
//解答
<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>
var ul = document.querySelector('.ct')
var begin = document.querySelector('#btn-add-start')
var end = document.querySelector('#btn-add-end')
var content = document.querySelector('.ipt-add-content')
begin.addEventListener('click', function(){
var addLiAtBegin = document.createElement('li')
addLiAtBegin.innerText = content.value
ul.insertBefore(addLiAtBegin,ul.firstChild)
})
end.addEventListener('click', function(){
var addLiAtEnd = document.createElement('li')
addLiAtEnd.innerText = content.value
ul.appendChild(addLiAtEnd)
})
ul.addEventListener('click', function(li){
console.log(li.target.innerText)
})
</script>
补全代码
要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<div class="img-preview"></div>
<ul class="ct">
<li data-img="http://otdgo898q.bkt.clouddn.com/playsation.png">playsation</li>
<li data-img="http://otdgo898q.bkt.clouddn.com/steam.png">steam</li>
<li data-img="http://otdgo898q.bkt.clouddn.com/%E6%88%98%E7%BD%91.png">battle.net</li>
</ul>
<script>
var ct = document.querySelector('.ct'),
childs = ct.querySelectorAll('li'),
preview = document.querySelector('.img-preview');
for(var i = 0; i < childs.length; i++){
childs[i].addEventListener('mouseenter', function(){
var dataImg = this.getAttribute('data-img')
preview.innerHTML = ''
})
}
</script>
网友评论