zoukankan      html  css  js  c++  java
  • Java Script 学习日志 Div

    2019年7月7日

    学习网站: http://www.w3school.com.cn/js/js_examples.asp

    1.输出

    1. 1首先就是输出看

    <script>
    document.getElementById("demo").innerHTML = 5 + 6;
    </script>

    1.2 弹窗输出

    <script>
    window.alert(5 + 6);
    </script>
     

    1.3 log 输出

    需要用 F12出现 console 界面
    <script>
    console.log(5 + 6);
    </script>
     
    image 

    1.4js动态添加div和删除div

    <div id="container">
    <input type="text" id="test"><button id="add">添加</button>
    </div>
    <div><p>tetse</p></div>
    <script type="text/javascript">
    var add = document.getElementById('add');
    var container =document.getElementById('container');
    var node=container.nextSibling;
    add.onclick = function(){
    oDiv = document.createElement('div');
    oDiv.innerHTML = "<div id='container1'><input type='text' id='test'><input type='button' onclick='test(this)' value='减少'/></div>";
    container.parentNode.insertBefore(oDiv, node)
    node=oDiv.nextSibling;
    
    }
    function test(test){
    test.parentNode.parentNode.removeChild(test.parentNode);
    }
    </script>	

    1.5  div  三列布局

    <title>三列布局</title>
    		<style type="text/css">
    			body,h1{margin: 0;padding: 0;}
    			.left{
    				float: left;
    				 33%;
    				background-color: black;
    				color: green;
    				height: 250px;
    			}
    
    			.middle{
    				float: left;
    				 33%;
    				background-color: yellow;
    				height: 250px;
    				color: gray;
    			}
                .right{
    				float: right;
    				 33%;
    				background-color: green;
    				height: 250px;
    				color: red;
    			}
    			.main{ 90%;
    			margin: 0 auto;
    			text-align: center;
    			}
    		</style>
    <div id="maincontainer">
                <div id="main2" class="main1">
                <div id="main20" class="left"> </div>
                <div id="main21" class="middle"> </div>
                <div id="main22" class="right"></div>
                </div>
    
    
            </div>

    image

     

    1.6

  • 相关阅读:
    扩展KMP学习笔记
    【洛谷P5555】秩序魔咒【回文自动机】
    PAM(回文自动机)学习笔记
    形象理解转置原理在FFT中的应用
    NOIP2020考后总结与计划
    CSP2020游记
    JavaScript——面向对象编程
    JavaScript——实现继承的几种方式
    JavaScript闭包
    学习一门新编程语言的6个步骤
  • 原文地址:https://www.cnblogs.com/chaoren399/p/11145858.html
Copyright © 2011-2022 走看看