原生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 ...
随机推荐
- [python]windows截图
Windows截图 截图:截取屏幕任意大小图片 下载pip install Pillow from PIL import ImageGrab # x1:开始截图的x坐标 # x2:开始截图的y坐标; ...
- [Struts2] <s:property>标签
调用类中的属性,通过get方法调用,而非其属性名调用. 比如A类中有属性a1,a1的get方法是getA1Method(); 相应Action类中的get方法是getA1Action(). 那么需要通 ...
- 文件下载 路径中有中文 报错 提示 文件找不到 java.io.FileNotFoundException: http://192.168.1.141:8096/resources/card/comcard/????????/????????.png
此问题主要是中文编码格式不对导致的,将路径中的中文部分设置下编码就可以啦 例如: String url = "http://192.168.1.141:8096/resources/car ...
- JWT ajax java spingmvc 简洁教程
1.添加依赖 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</ ...
- 『Python CoolBook』C扩展库_其六_线程
GIL操作 想让C扩展代码和Python解释器中的其他进程一起正确的执行, 那么你就需要去释放并重新获取全局解释器锁(GIL). 在Python接口封装中去释放并重新获取全局解释器锁(GIL),此时本 ...
- PAT 1077 Kuchiguse
1077 Kuchiguse (20 分) The Japanese language is notorious for its sentence ending particles. Person ...
- vs2013+qt5.3.2+pcl1.8.0+osg2.3开发环境配置
一.安装vs2013 注意:最好安装VS2013 Update 5,不然有些项目会报莫名其妙的异常. VS2013 Update 5下载:https://pan.baidu.com/s/1TAU5Qi ...
- 2015-10-21 C#1
C#(一) 一.C#的数值类型 byte----字节型 short---短整型 int------整型 long----长整型 char----字符型 float----单精度型 double--双精 ...
- Win10系列:C#应用控件基础21
ListView控件 ListView控件的常用方式是与后台数据进行绑定,并将所绑定的数据内容与前端界面布局相结合,按照特定的顺序将数据集合以列表形式展示在界面当中,如电子邮件列表或搜索结果列表等. ...
- Python字符编码的发展、cmd寻找路径
字符编码的发展: ASCII(American Standard Code for Information Interchange,美国标准信息交换代码)是基于拉丁字母的一套电脑编码系统,主要用于显示 ...