原生js移除或添加样式

样式效果如下,点击商品详情添加样式active 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="&qu…

前言本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做记号,比如添加个下划线,或者背景涂色做成荧光笔的样子. 因为只需要兼容IE9,所以window.getSelection是支持的.(IE8及以下有其它的获取选中的方法) 那么思路就是选中文本,点击添加下划线后,通过 window.getSelection.getRangeAt(0) 拿到选中的文本对…

原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求，页面离开的操作

1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)…

原生js实现点击添加购物车按钮出现飞行物飞向购物车

效果演示: 思路:核心->抛物线公式 let a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3)); let b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3)); 3 let c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x…

通过原生JS实现为元素添加事件

自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流代码: var bindEvent = { 'add':function(id,type,fn,isBubble){ var dom = document.getElementById(id); if(!isBubble) isBubble=false; if(dom.addEventListenner){ dom.…

原生js获取元素非行内样式属性的方法

获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.currentStyle.width 这样的话在IE8以下正常显示,但标准浏览器下又会报错,所以一要判断一下 //getStyle()函数,获取元素的非行内样式 //使用方法 getStyle(元素,"属性名") 如:getStyle(oBox,"background") fu…

原生JS怎样给div添加链接

html: <div href="http://www.atigege.com" target="_blank">个人网站</div> js代码: clickToHref(); //点击链接事件,IE8及以下不支持,IE9 strict mode不支持,20181019 by 阿提function clickToHref() { var eles = document.querySelectorAll("div[href]"…

js实现分页列表添加样式

原生js实现tab选项卡

1.html部分 <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> …

原生JS+Canvas实现五子棋游戏

一.功能模块先看下现在做完的效果: 线上体验:https://wj704.github.io/five_game.html 主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘: //绘画棋盘 var drawChessBoard = function(){ for(var i = 0; i < 15; i++){ context.moveTo(15 + i *…