原生JS的常用方法

原生JS的常用方法

1.函数接收参数并弹出
例如：

 <div class="box">
        <input type="text" name="item" value="北京市"><br>
        <input type="text" name="item" value="朝阳区"><br>
        <button id="btn">传参</button>
    </div>
    
<script>
      function show(v){
        alert(v)
    }
    var item = document.getElementsByName('item')
    var btn = document.getElementById('btn')
  
    btn.onclick = function(){
        for(var i=0;i<item.length;i++){
            show(item[i].value)
        }
    }
</script>

2.记住密码提示框
例如：

 <div id="box">
        <input type="checkbox" name="" id="">
        两周内自动登录
    </div>
    <div id="warn">
        为了您的信息安全，请不要在网吧或公共场合使用此功能
    </div>
    
    <script>
    var box = document.getElementById('box')
    var warn = document.getElementById('warn')
    box.onmouseleave =function(){
        warn.style.display = "none"
    }
    box.onmouseenter =function(){
        warn.style.display = ""
    }
</script>

3.控制div属性
例如：

<div class="box">
        <button onclick="cheight()">变高</button>
        <button onclick="cwidth()">变宽</button>
        <button onclick="ccolor()">变色</button>
        <button onclick="chide()">隐藏</button>
        <button onclick="creset()">重置</button>

        <div id="mydiv"></div>
    </div>
    
<script>
    var sdiv = document.getElementById('mydiv')

    function cheight() {
        sdiv.style.height = "200px"
    }
    function cwidth() {
        sdiv.style.width = "200px"
    }
    function chide() {
        sdiv.style.display = "none"
    }
    function ccolor() {
        sdiv.style.backgroundColor = "pink"
    }
    function creset() {
        sdiv.style.cssText = "width:100px;height:100px;backgroundColor:aqua"
    }
</script>

4.使用循环将3个div变成红色
例如：

<div class="box">
        <button id="btn">点击将div变成红色</button>
        <div class="content">
            <div name="cdiv"></div>
            <div name="cdiv"></div>
            <div name="cdiv"></div>
        </div>
    </div>
    
    <script>
    var btn = document.getElementById('btn')
    var cdiv = document.getElementsByName('cdiv')
    btn.onclick = function(){
        for(var i=0;i<cdiv.length;i++){
            cdiv[i].style.backgroundColor = "red"
        }
    }
</script>

5.鼠标移入移出改变样式
例如：

  <div id="box">
       <p>鼠标移入改变样式，移出恢复</p> 
    </div>
    
    <script>
    var box = document.getElementById('box')
    box.onmouseenter =function(){
        box.style.cssText = "border-color:red;color:red"
    }
    box.onmouseleave =function(){
        box.style.cssText = "border-color:black;color:white"
    }
</script>

6.网页换肤
例如：

<div class="box">
        <div class="top">
            <div class="pink" onclick="cone()"></div>
            <div class="skyblue" onclick="ctwo()"></div>
            <div class="aqua" onclick="cthree()"></div>
        </div>
        <div class="content">
            <ul>
                <li>新闻</li>
                <li>娱乐</li>
                <li>体育</li>
                <li>电影</li>
                <li>音乐</li>
                <li>旅游</li>
            </ul>
        </div>
    </div>
    
<script>
    var box = document.getElementsByClassName('box')[0]
    var content = document.getElementsByClassName('content')[0]
    var pink = document.getElementsByClassName('pink')[0]
    var skyblue = document.getElementsByClassName('skyblue')[0]
    var aqua = document.getElementsByClassName('aqua')[0]

    function cone(){
        box.style.backgroundColor = "red"
        content.style.backgroundColor = "yellow"
        pink.style.borderColor = "black"
        skyblue.style.borderColor = ""
        aqua.style.borderColor = ""
        // console.log(1111);
    }
    function ctwo(){
        box.style.backgroundColor = "blue"
        content.style.backgroundColor = "orange"
        skyblue.style.borderColor = "black"
        aqua.style.borderColor = ""
        pink.style.borderColor = ""
    }
    function cthree(){
        box.style.backgroundColor = "greenyellow"
        content.style.backgroundColor = "pink"
        aqua.style.borderColor = "black"
        skyblue.style.borderColor = ""
        pink.style.borderColor = ""
    }
</script>

7.输入法选择
例如：

<div class="box">
        <button id="btn">输入法</button>
        <ul id="cul">
            <li>手写</li>
            <li>拼音</li>
            <li id="del">关闭</li>
        </ul>
    </div>
    <script>
    var btn = document.getElementById('btn')
    var cul = document.getElementById('cul')
    var del = document.getElementById('del')

    btn.onclick =function(){
        cul.style.display = cul.style.display == "block"?"none":"block"
    }
    del.onclick =function(){
        cul.style.display = "none"
    }

</script>

8.点击div显示innerHTML
例如：

 <div name="box">
            111111111111111111111111111111111111111111111111
        </div>
        <div name="box">
            22222222222222222222222222222222222222222222
        </div>
        <div name="box">
            333333333333333333333333333333333333333333333333
        </div>
        <div name="box">
            4444444444444444444444444444444444444444444
        </div>
        
        <script>
    var box = document.getElementsByName('box')

   
        for(var i=0;i<box.length;i++){
           box[i].onclick =function(){
               alert(this.textContent)
           }
        }
   
</script>