dom 操作总结即获取图片的样式和宽高

<div className="smallItemContent">
    <div className="wrapImage"><img src={image05} alt=""/></div>
    <div className="wrapBottom">
        <div className="worker">火山将作品</div>
        <div className="readAndLove">9&nbsp;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&nbsp;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)

dom 操作总结即获取图片的样式和宽高

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);
   }
}
上一篇:jstl中的choose标签


下一篇:JavaScript 属性