24个解决实际问题的ES6代码片段(小结)

这是从30 seconds of code中挑出来的非常有用的一些代码片段，这是一个非常棒的项目，大家可以去github上去搜索一下，给个star。

在本文中，我试图根据它们的实际用途对它们进行分类，回答您在项目中可能遇到的常见问题：

1.如何隐藏指定的所有元素？

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));// Examplehide(document.querySelectorAll('img')); // Hides all <img> elements on the page

2.如何检查元素是否具有指定的类？

const hasClass = (el, className) => el.classList.contains(className);// ExamplehasClass(document.querySelector('p.special'), 'special'); // true

3.如何为元素切换类？

const toggleClass = (el, className) => el.classList.toggle(className);// ExampletoggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore

这里使用了classList.toggle()方法

toggle( String [, force] )

当只有一个参数时：切换类值；也就是说，即如果类值存在，则删除它并返回 false，如果不存在，则添加它并返回 true。
当存在第二个参数时：若第二个参数的执行结果为 true，则添加指定的类值，若执行结果为 false，则删除它。

4.如何获取当前页面的滚动位置?

const getScrollPosition = (el = window) => ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop});// ExamplegetScrollPosition(); // {x: 0, y: 200}

5.如何平滑滚动到页面顶部?

const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); }};// ExamplescrollToTop();

递归的方法不断调用使用scrollToTop()，requestAnimationFrame方法告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。它的回调函数执行次数通常与浏览器屏幕刷新次数相匹配，所以效果会比较平滑。

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop

获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft

6.如何检查父元素是否包含子元素？

const elementContains = (parent, child) => parent !== child && parent.contains(child);// ExampleselementContains(document.querySelector('head'), document.querySelector('title')); // trueelementContains(document.querySelector('body'), document.querySelector('body')); // false