<body>
<div id="box" style="width: 300px; height: 300px; background-color: green;">
<p id="text" style="background: mistyrose; width: 100px;">hello world!</p>
<img src="res/apple.png" height="300px" width="400px">
</div>
<script type="text/javascript">
let oDiv=document.getElementById("box")
let oTxt=document.getElementById("text")
let oImg=document.getElementsByTagName('img')[0]
oDiv.style.background='yellow'
oDiv.style.backgroundColor='palegoldenrod'
//oDiv.style[] 用中括号可直接调用原生css 这里没有点.!!!!
oDiv.style['backgroundColor']='plum'
oDiv.style['background-color']='yellow'
//需要把backgroundColor写成驼峰式background-color 和上面对应 才能使用
oDiv.style.setProperty('background','blue')
// oDiv.style.setProperty('backgroundColor','teal')
oDiv.style.setProperty('background-color','yellowgreen')
// .setProperty() 设置样式值 括号里(属性名,属性值)
alert(oImg.getAttribute('width'))
//getAttribute()获取属性或字段 只能获取行内属性值 专门用来获取行内属性值
oImg.setAttribute('width','100px')
//setAttribute()设置属性 括号里(属性名,属性值)
</script>
</body>