<div className="smallItemContent">
<div className="wrapImage"><img src={image05} alt=""/></div>
<div className="wrapBottom">
<div className="worker">火山将作品</div>
<div className="readAndLove">9 2</div>
<div className="author">
<img src="" alt=""/>
<div>天狼 </div> <div>字体设计</span>
</div>
</div>
</div>
将上边的代码转换成dom操作的代码就是下边的操作
let smallItemContent = document.createElement("div") let wrapImage = document.createElement("div") let wrapBottom = document.createElement("div") let worker = document.createElement("div") let readAndLove = document.createElement("div") let author = document.createElement("div") let $div1 = document.createElement("div") let $div2 = document.createElement("div") let bigimg = document.createElement("img") let userimg = document.createElement("img") smallItemContent.setAttribute("class","smallItemContent") wrapImage.setAttribute("class","wrapImage") wrapBottom.setAttribute("class","wrapBottom") worker.setAttribute("class","worker") readAndLove.setAttribute("class","readAndLove") author.setAttribute("class","author") bigimg.setAttribute("src",imgList[imgId]) wrapImage.appendChild(bigimg) smallItemContent.appendChild(wrapImage) worker.append("火山将作品") wrapBottom.appendChild(worker) readAndLove.append("9 2") wrapBottom.appendChild(readAndLove) userimg.setAttribute("src",imgList[imgId]) author.appendChild(userimg) $div1.append("天狼") author.appendChild($div1) $div2.append("字体设计") author.appendChild($div2) wrapBottom.appendChild(author) smallItemContent.appendChild(wrapBottom)
window.onload = function () { var box = document.getElementsByClassName("leftItemContent")[0].children // 这里要说的是操作完一个dom后还是可以继续操作dom的 for(var i=0; i<box.length;i++){ let imgNodeStyle =window.getComputedStyle(box[i]. getElementsByClassName("wrapImage")[0].children[0]) console.log(imgNodeStyle.height) console.log(box[i].getElementsByClassName("wrapImage")[0].children[0].width); console.log(box[i].getElementsByClassName("wrapImage")[0].children[0].height); } }