task 3:编写函数实现单击change按钮,为div元素添加红色双线的边框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编写函数实现单击change按钮,为div元素添加红色双线的边框。</title>
    <style type="text/css">
        div{
            font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",sans-serif;
            width: 600px;
            text-align: center;
        }
        .haha{
            margin-top: 20px;
            margin-left: 250px;
            font-size: 20px;
        }
        .haha:hover{
            border: 3px solid purple;
        }
    </style>
</head>
<body>

<div id="joy"> <p>123456。</p>
   </div>
   <button class="haha" onclick="myFunction()">change</button>
   <script type="text/javascript">
    function  myFunction(){
        var Color = document.getElementById("joy");
        Color.style.border = "3px double red";
        Color.innerHTML = "<p>123456789</p>";
      
    }
    </script>
</body>
</html>

posted @ 2019-10-16 16:05  严文韬  阅读(3055)  评论(0编辑  收藏  举报