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. python tar 打包

    import os import tarfile def make_targz_one_by_one(output_filename, source_dir): tar = tarfile.open( ...

  2. linux 新建用户、用户组 以及为新用户分配权限的基本操作

    分享下Linux系统中创建用户.设置密码.修改用户.删除用户的命令: 创建用户:useradd testuser  创建用户testuser设置密码:passwd testuser  给已创建的用户t ...

  3. RNN流程

    1.记号 2.前向计算,第二张图是第一张图的公式的简化.其中a称之为隐状态 3.计算代价函数

  4. 整数转罗马数字以及罗马数字转整数(java实现)

    题目: 1.罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II  ...

  5. Angular 学习笔记 (Material Datepicker)

    https://material.angular.io/components/datepicker/overview 官网介绍很清楚了,这里记入一下我比较不熟悉的. 1. moment js Angu ...

  6. php 截取 小程序上传到服务器图片,

    截取字符串传入数据库 $f_slide = htmlspecialchars_decode($_REQUEST['f_slide']); // echo "<pre>" ...

  7. php同curl post 发送json并返回json数据实例

    <?php $arr = array( 'subject'=>'课程', 'loginName'=>'Durriya', 'password'=>'123' ); //json ...

  8. C++解析九-数据抽象

    数据抽象 数据抽象是指,只向外界提供关键信息,并隐藏其后台的实现细节,即只表现必要的信息而不呈现细节.数据抽象是一种依赖于接口和实现分离的编程(设计)技术.让我们举一个现实生活中的真实例子,比如一台电 ...

  9. JS之event flow

    DOM事件流 1.定义: DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM ...

  10. WindowsForms 调用API

    WindowsForms 后台 using System;using System.Collections.Generic;using System.ComponentModel;using Syst ...