能用HTMLCSS解决的问题就不要使用JS课案.docx

能用HTML/CSS解决的问题就不要使用JS为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，本文介绍几个实例。作者：会编程的银猪来源：会编程的银猪|2016-12-07 08:21?收藏??分享?为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。1. 导航高亮导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。在正常态时，每个导航的默认样式为：nav?li{?????opacity:?0.5;?}?当前页面的导航透明度为1. 为了实现这个目的：首先通过body给不同的页面添加不同的类，用来标志不同的页面!--?home.html?--?body?class=home/body?!--?buy.html?--?body?class=buy/body?所有的li也用class标志，为了有一个一一对应的关系：li?class=homehome/li?li?class=buybuy/li?然后就可以设置当前页面的样式，覆盖掉默认的样式：body.home?nav?li.home,?body.buy?nav?li.buy{?????opacity:?1;?}?这样子，如果当前页面是home，则body.homenali.home这条规则生效，home的导航将高亮这个技艺在《精通CSS》这种书里面有提及。如果你用js控制，那么在脚本加载好之前，当前页面是不会高亮的，而脚本加载好之后突然就高亮了。所以用js吃力不讨好。hover时的高亮，可以用css的:hover选择器：nav?li:hover{?????opaciy:?1;?}?加上:hover选择器的优先级将会高于原本的，鼠标hover的时候将会覆盖默认样式，即高亮。你也可以用mouse事件，mouseover的时候添加一个类，mouseleave的时候移除掉这个类，这样就变复杂了，用CSS甚至可以兼容不支持JS的浏览器，用户可能把浏览器的js禁掉了。我一个纯展示的静态页面，为啥要写js呢，是吧。注意这个hover选择器特别好用，几乎适用于所有需要用鼠标悬浮时显示的场景。2. 鼠标悬浮时显示鼠标悬浮的场景十分常见，例如导航的菜单：以及在《Google地图开发总结》一文提到的，marker详情框的显示：一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用css控制，例如上面的菜单，是把menu当作导航的一个相邻元素：li?class=user用户/li?li?class=menu?ul?li账户设置/li?li登出/li?/ul?/li?menu在正常态下是隐藏的：.menu{?????display:?none;?}?而当导航hover时显示：.user:hover?+?.menu{?????display:?list-item;?}?注意这里使用了一个相邻选择器，这也是上面说的为什么要写成相邻的元素。menu的位置可以用absolute定位。同时menu自已本身hover的时候也要显示，否则鼠标一离开导航的时候，菜单就消失了：.menu:hover{?????display:?list-item;?}?这里会有一个小问题，即menu和导航需要挨着一起，否则中间有空隙的话，上面添加的菜单hover就不能发挥作用了，但是实际情况下从美观的角度，两者是要有点距离的。这个其实也好解决，只要在menu上面再画一个透明的区域就好了，如下蓝色的方块：可以用before/after伪类用absoute定位实现：ul.menu:before{?????content:?;?position:?absolute;?left:?0;?top:?-20px;?width:?100%;?height:?20px;?/*background-color:?rgba(0,0,0,0.2);*/?}?如果我既写了css的hover，又监听了mouse事件，用mouse控制显示隐藏，双重效果会有什么情况发生，如果按正常套路，在mouse事件里面hover的时候，添加了一个display: block的style，会覆盖掉CSS的设置。也就是说，只要hover一次，css的代码就不管用了，因为内联样式的优先级会高于外链的。但是实际情况下会有意外发生，那就是在移动端iphone上面，触摸会触发CSS的hover，并且这个的触发会很高概率地先于touchstart事件，在这个事件里面会判断当前是显示