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主题的导航栏基于这种方式进行实现。

上一篇:

下一篇:

评论*

  1. repostone说道:

    非技术的路过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注