js background的几种书写形式

最新推荐文章于 2023-03-27 20:16:26 发布

paradoxaaa_

最新推荐文章于 2023-03-27 20:16:26 发布

阅读量1.3k

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/paradoxaaa_/article/details/120724737

版权

<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>