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]");
eles.forEach(function (item) {
item.addEventListener("click", function () {
var href = item.getAttribute("href");
var target = item.getAttribute("target");
if (!target) {
location.href = href;
}
else {
window.open(href, target);
}
});
})
}

不支持IE8以下原因:document.querySelectorAll

eles.forEach不支持IE9的 strict mode模式

原生JS怎样给div添加链接的更多相关文章

  1. 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  2. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

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

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

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

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

  5. html div 添加链接

    <html> <body> <a href="http://www.w3school.com.cn/" target="_blank&quo ...

  6. 原生js移除或添加样式

    样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...

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

    自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...

  8. js在以div添加滚动条

    给予div另外,当我们必须定义高度和宽度的滚动条,使滚动条是有效,增加样式:overflow:auto; 版权声明:本文博主原创文章.博客,未经同意不得转载.

  9. 原生JS去解析地址栏的链接?超好用的解决办法

    在做SPA应用程序的时候,往往需要通过地址栏链接的 hash 值来进行业务逻辑: <script type="text/javascript"> //file:///C ...

随机推荐

  1. 这可能是史上最全的css布局教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  2. 使用Jekins自动构建项目(GitLab+Java Maven)

    1. 登录Jekins 前提: Jekins 已经部署完成并能登录版本:Jenkins2.60.2 http://IP:端口/jenkins/view/all/newJob 2. 新建构建任务 选择项 ...

  3. URI和URL之间的区别

    URI的全称为统一资源标识符(Uniform Resource Identifier),是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交 ...

  4. e1000e 网卡如遇到大包未线速问题解法

    e1000e 网卡如遇到大包(>1280)未线速,把'DEFAULT_ITR'改为0, 不设中断频率上限试试 see@intel/e1000e/param.c/* Interrupt Throt ...

  5. springboot应用无故停止运行killed解决方法

    最近使用springboot开发了一个ip代理的程序,今天放到阿里云服务器上运行,多次出现应用运行突然停止的问题. 使用free -h 查看内存使用完全正常.重新运行监视CPU使用也正常.没有出现堆内 ...

  6. 机器学习 之XGBoost算法

    目录 1.基本知识点简介 2.XGBoost提升树算法 2.1 XGBoost原理 2.2 XGBoost中损失函数的泰勒展开 2.3 XGBoost中正则化项的选定 2.4 最终的目标损失函数及其最 ...

  7. laravel StartSession中间件的实现原理

    1. 打开app\Http\Kernel.php,找到StartSession的位置.这里要说一下,middleware中的中间件是都会被执行的,但执行的顺序我不知道,还需看源码来实现 protect ...

  8. promise学习总结

    什么是Promise Promise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中.resolved-已完成.rejected-已失败 当Promise的状态又pending转变 ...

  9. 【LeetCode】不同路径

    如图,m × n 的网格的左上角作为起点,每次只能向右或向下移动一格,最终要到达右下角.求有多少条可能的路径. m,n 最大取 100. 我的想法是递归,分分钟实现 int uniquePaths(i ...

  10. 基于FastJson的通用泛型解决方案

    由于项目使用的是fastjson,也无法换成其他的序列化框架,所以研究了一下他对泛型序列化和反序列化的支持能力,最终解决了这个问题. 要达成的目标 我的封装方式属于通用封装,我要达到的目标是如下的使用 ...