原生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]");
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添加链接的更多相关文章
- 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
- 原生js实现点击添加购物车按钮出现飞行物飞向购物车
效果演示: 思路:核心->抛物线公式 let a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1- ...
- html div 添加链接
<html> <body> <a href="http://www.w3school.com.cn/" target="_blank&quo ...
- 原生js移除或添加样式
样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...
- 通过原生JS实现为元素添加事件
自己写了一个为元素添加事件的方法,并封装到对象中. 说明: id : 目标元素的ID type: 事件的类型,注意的是不能加on fn:事件处理程序 isBubble :规定事件流 代码: var b ...
- js在以div添加滚动条
给予div另外,当我们必须定义高度和宽度的滚动条,使滚动条是有效,增加样式:overflow:auto; 版权声明:本文博主原创文章.博客,未经同意不得转载.
- 原生JS去解析地址栏的链接?超好用的解决办法
在做SPA应用程序的时候,往往需要通过地址栏链接的 hash 值来进行业务逻辑: <script type="text/javascript"> //file:///C ...
随机推荐
- buntu下cutecom图像界面串口调试工具使用
一.安装,首先下载这个软件,终端和软件中心均可下载,终端下载命令: sudo apt-get install cutecom 即可快速搞定安装问题. 软件中心: 由于我已经通过终端安装成功,所以软件中 ...
- 盛最多水的容器(java实现)
题目: 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器
jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...
- erlang调试方法
第一种方式,加打印记录 %%-define(debug, ok). -ifdef(debug). -define(LOG(X), io:format("pid:~p , {~p,~p}: ~ ...
- Lua 语言环境安装
Linux 系统上安装(本文使用了5..0版本进行安装:) curl -R -O http://www.lua.org/ftp/lua-.tar.gz tar zxf lua-.tar.gz cd l ...
- 1018. Binary Prefix Divisible By 5可被 5 整除的二进制前缀
网址:https://leetcode.com/problems/binary-prefix-divisible-by-5/ 一次for循环遍历数组,在上次计算的基础上得到本次的结果! class S ...
- liunx 安装mysql数据库
yum 安装rz/sz yum install -y lrzsz 卸载Mariadb数据库 查询所安装的MariaDB组件: [root@localhost logs]# rpm -qa | gr ...
- caffe安装
安装caffe的时候一定要保持一个乐观的心态,不然容易放弃人生.由于自己是装完才写的,所以并没有截图. 平台:Window7 硬件:NVIDIV quaro M4000 软件:Visual Studi ...
- SSH Struts2+hiberante+Spring整合
使用SSH框架编写学生信息: 一.新建Java工程: (1)建立好Java各层级之间的结构:业务处理层dao,数据模型层domain,页面请求处理层(Struts2 MVC层)action,servi ...
- bootstrap validator 出现Maximum call stack size exceeded
如果用 c# 里面用的是 taghelper 的控件,有可能造成 Maximum call stack size exceeded bootstrap validator 必须是继承 bootst ...