前端设计师们最常用的JS代码汇总

时间:2021-05-25

逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);

阻止默认行为

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event; if (event.preventDefault){ // w3c方法 阻止默认行为 event.preventDefault(); } else{ // ie 阻止默认行为 event.returnValue = false; }}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();});

阻止冒泡

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event; if (event.stopPropagation){ // w3c方法 阻止冒泡 event.stopPropagation(); } else{ // ie 阻止冒泡 event.cancelBubble = true; }}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();});

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) { // chrome & ie || // firefox var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1)); if (delta > 0) { // 向上滚动 console.log('mousewheel top'); } else if (delta < 0) { // 向下滚动 console.log('mousewheel bottom'); } });

检测浏览器是否支持svg

function isSupportSVG() { var SVG_NS = 'http:///matthewhudson/device.js

getBoundingClientRect() 获取元素位置

//它返回一个对象,其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left; var y = myDiv.getBoundingClientRect().top; // 相当于jquery的: $(this).offset().left、$(this).offset().top // js的:this.offsetLeft、this.offsetTop

HTML5全屏

function fullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }}fullscreen(document.documentElement);

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章