JS特性检测,检测元素上是否有指定属性或当前浏览器是否支持某元素或某属性

我们在开发的过程中如果要向后兼容的话我认为这篇文章还是很能帮助到你的。可以把笔者的代码copy过去使用。

我们要检查指定元素上面是否有特定的属性,可以使用下面这个函数:

function elementSupportsAttribute(elementName, attribute) {
	if (!document.createElement) return false;
	let temp = document.createElement(elementName);
	return ( attribute in temp );
}

如果此函数返回false说明elementName中不包含attribute属性。

参数:
elementName: 字符串类型,如:‘div’
attribute: 字符串类型, 如:‘width’

或者你不提成一个方法,每次自己手动写:

"autoplay" in document.createElement('video')  //查看video元素当中是否有autoplay这个属性,答案是肯定的
"autoplay" in document.createElement('div')  //查看div元素当中是否有autoplay这个属性,答案是否定的
"flex" in document.createElement('div').style //检测div的样式中是否存在flex

在这里插入图片描述
通过此方法也可检测是在移动端还是PC端:

//定义一个变量,存放是否存在"ontouchend"事件
const hasTouch = "ontouchend" in document ? true : false;//如果存在说明是移动端结果为true,如果不存在说明是在PC端结果为false;
if(hasTouch){
	//移动端代码逻辑
}else{
	//PC端代码逻辑
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值