JS动态获取input标签状态并改变元素css样式

在写导航栏自适应的时候需要用到 将一个input和两个label标签进行绑定，实现自适应状态下的导航栏开关

<input type="checkbox" id="chk">
<label for="chk" id="" class="show-menu-btn">
      <i class="fa fa-list"></i>
</label>
<label for="chk" class="hide-menu-btn">
      <i class="fa fa-arrow-right"></i>
</label>

点击第一个label标签按钮弹出隐藏的导航栏，点击第二个label按钮时关闭并隐藏导航栏

<div class="main-nav wrap" id="main-nav">
    <?php 
        // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
        wp_nav_menu( 
            array(
                'theme_location' => 'top', //指定显示的导航名，如果没有设置，则显示第一个
                'menu' => 'header-menu',
                'container' => 'nav', //最外层容器标签名
                'container_class' => 'ease-c-head-nav', //最外层容器class名
                'container_id' => 'ease-i-head-nav',//最外层容器id值
                'menu_class' => 'ease-nav', //ul标签class
                'menu_id' => 'nav-ul',//ul标签id
                'depth' => 1,////显示的菜单层数，默认0，0是显示所有层
            ));
    ?>
    <label for="chk" class="hide-menu-btn">
        <i class="fa fa-arrow-right"></i>
    </label>
</div> 

上方的.main-nav即为隐藏的导航栏，首先获取label标签是否勾选，勾选即代表点击了导航按钮，再次点击即代表关闭导航栏

var ease_menu_input = document.getElementById("chk"); //获取input标签
            var ease_main_nav = document.getElementById("main-nav");//获取main-nav以便于修改style属性
            console.log(ease_menu_input.checked);//检查input是否勾选，true或者false
            ease_menu_input.onclick = function(){  //写一个匿名函数并赋值给点击事件
                if (ease_menu_input.checked == true){
                    ease_main_nav.style.right="0";  //点击打开导航栏时从右侧移动至屏幕显示范围
                console.log("按钮checked:true");
                }else{
                    ease_main_nav.style.right="-120%";//点击关闭导航栏时从右侧移出屏幕显示范围
                    console.log("按钮checked:false");
                }
            }

这里用到js的DOM操作改变元素style属性

/* 1.直接设置style属性 */

element.style.height = '100px';

/* 2.直接设置属性 */

element.setAttribute('height', '100px');

/* 3.使用setAttribute设置style属性 */

element.setAttribute('style', 'height: 100px !important');

/* 4.使用setProperty设置属性，通过第三个参数设置important */

element.style.setProperty('height', '300px', 'important');

/* 5.设置cssText */

element.style.cssText += 'height: 100px !important';

Ease主题的导航栏基于这种方式进行实现。