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. Kafka-Record(消息格式)

    注:本文依赖于kafka-0.10.0.1-src kafka消息格式是经过多个版本的演变的,本文只说0.10.0.1版本的消息格式. 消息格式如图1所示: 图1 CRC:用于校验消息内容.占4个字节 ...

  2. Netflix分享构建Microservices的经验

    Netflix分享构建Microservices的经验 http://t.cn/Rwjgutw 新词:Microservices.我觉得就是service oriented architecture的 ...

  3. 解决Android studio生成H文件时报找不到类文件错误

    今天整理思路时觉得在native直接调用java的方法显示这个办法挺不错 于是就用到了生成H文件 可能我的编译环境和他们的不一样 网上的教程如下 javah -d ../jni com.jm.prom ...

  4. PAT 1073 Scientific Notation

    1073 Scientific Notation (20 分)   Scientific notation is the way that scientists easily handle very ...

  5. 监听图片src发生改变时的事件

    $img.on('load', function() { $img.attr("src", getBase64Image($img.get(0))); $img.off('load ...

  6. Weka中数据挖掘与机器学习系列之Weka系统安装(四)

    能来看我这篇博客的朋友,想必大家都知道,Weka采用Java编写的,因此,具有Java“一次编译,到处运行”的特性.支持的操作系统有Windows x86.Windows x64.Mac OS X.L ...

  7. tensorFlow(一)相关重要函数理解

    1.函数及参数:tf.nn.conv2d conv2d( input, filter, strides, padding, use_cudnn_on_gpu=True, data_format='NH ...

  8. JVM Optimization

    架构图 基本概念说明 堆(heap):数据存储,对象实例:空间往上增长,线程共享区:大小可通过-Xmx和-Xms配置 新生代(Young Generation):划分为Eden Space和两个Sur ...

  9. 为何放弃Eclipse,选择IntelliJ IDEA,看完终于明白了

    如果你初次用idea,毫无目的的度娘如何使用IDEA     浪费的将会是大量的时间.一套让你花时间,少走弯路的视频教程(下载地址:https://pan.baidu.com/s/1gfeX3hD) ...

  10. java基础学习之接口

    接口可以说是一个特殊的抽象类,接口里的方法都是抽象方法, 接口的特点: 1.一个类可以实现多个接口,也可以在继承一个类后继续实现多个接口(多实现间接支持了类的多继承) 2.接口可以继承另一个接口,并且 ...