js background的几种书写形式

茹康裕
2023-12-01

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

 类似资料: