1. 补全代码，要求：当鼠标放置在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>
思路：利用document.querySelector选择ct，img-preview，命名变量。再利用.addEventListener(" ",function(){ })添加事件，代码如下：
<ul class="ct">
<li data-img="https://upload-images.jianshu.io/upload_images/3624093-686aee09fe6332d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片1</li>
<li data-img="https://upload-images.jianshu.io/upload_images/3624093-9b41b029ce86f390.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片2</li>
<li data-img="https://upload-images.jianshu.io/upload_images/3624093-65b9217d7cb93f94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector(".ct");
var preview = document.querySelector(".img-preview");
ct.addEventListener('mouseover', function(e){
var img = e.target.getAttribute("data-img");
preview.innerHTML = '<img src="'+img+'">';
});
</script>
- 完成node.classList.add,remove,toggle,contains的应用
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class
4.如何获取dom计算后的样式？
var node = document.querySelector('p')
var color =window.getComputedStyle(node).color
console.log(color)
5.写一个函数，批量操作css
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
代码如下：
function css(node,styleObj) {
for (var key in styleObj) {
node.style[key] = styleObj[key]
}
}
-
列出DOM 元素选取的 API。以及如何创建，修改，添加元素。
欸，算嘞算嘞~再写一篇吧
