DOM的style对象设置样式

原创
2016/03/29 09:12
阅读数 37

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" >
  <title>Setting the style of page elements</title>
  <style>
    span{
     font-size: 16px;
     font-family: arial,helvetica,sans-serif;
     padding: 50px;
    }
  </style>
  <script>
   function toggle(){
    var myElement=document.getElementById("id1");
    if(myElement.style.backgroundColor=='red'){
     myElement.style.backgroundColor='yellow';
     myElement.style.color='black';
    }else{
     myElement.style.backgroundColor='red';
     myElement.style.color='white';
    }
   }
   window.onload=function(){
    document.getElementById("btn1").onclick=toggle;
   }
  </script>
</head>
<body>
  <span id="id1">欢迎来到我的站点</span>
  <input type="button" id="btn1" value="Toggle"></input>
</body>
</html>

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部