zoukankan      html  css  js  c++  java
  • 操作document对象练习

    对div进行操作document的练习

    步骤  做div------找到要挂事件的div命名它---------挂入事件完成对对象的操作

    <style type="text/css">
        #first{
             100px;
            height: 70px;
            background-color: aqua;
            text-align: center;
            line-height: 70px;
            color: darkgreen;
            
        }
        #second{
             200px;
            height: 170px;
            background-color: darkgoldenrod;
            text-align: center;
            line-height: 170px;
            color: darkgreen;
            
        }
        
            </style>
        </head>
        <body>
            <div id="first">
                按钮
            </div>
            <div id="second">
                文本
            </div>
            <div id="sixth"></div>
            <div id="not"></div>
        </body>
        
    </html>
    <script type="text/javascript">
     //找到要挂事件的div
        var first = document.getElementById("first");
        //挂事件
        first.onclick = function(){
            var second = document.getElementById("second");
            second.innerHTML = "新文本";
            second.style.transition = "3s";
            second.style.width = "300px";
            second.style.height = "260px";
            second.style.backgroundColor = "orange";
            second.style.color = "black";
            second.style.marginLeft = "100px";
        }
    
     
     
    </script>

    鼠标点击div产生变化

  • 相关阅读:
    操作系统---学习笔记00
    操作系统---学习笔记0
    2015/07/16入园啦!
    1-1 console的用法
    2.3 js基础--DOM
    1.2 js基础
    1.1 js基础
    信息收集(1)
    Android概述
    从一次失败的比赛经历引发的思考
  • 原文地址:https://www.cnblogs.com/zhengleilei/p/9036716.html
Copyright © 2011-2022 走看看