当前位置: 首页 > Web前端 > vue.js

原来DOM也有类似toggleAttribute的JSAPI

时间:2023-04-01 12:36:41 vue.js

1.静默新APIDOM元素的属性设置API包括:setAttribute(name,value),getAttribute(name),hasAttribute(name),removeAttribute(name)。都是很常用的API,一直以为设置属性的DOMAPI就那么几个。然而一个偶然的机会,我突然发现现代主流浏览器都支持了一个全新的与DOM属性相关的APItoggleAttribute(name[,force])。我在caniuse上搜了一下,不管是Edge、Chrome、Firefox还是Safari浏览器,都是2018年第四季度开始支持的,好像是约好了一样。它真的只是悄无声息地出现了。想想看,DOMAPI真是悲哀。浏览器支持无人问津,前端圈无波澜;同时浏览器支持新的JS语法糖,圈内干杯,文章满天飞。配图是这样的:2、HTML逻辑属性设置专家toggleAttribute()是控制HTML元素逻辑属性的最佳选择。HTML中常见的逻辑属性有:disabled、readonly、selected、checked、open(被

元素使用)、novalidate(被
元素使用)、required、reversed(被
      elementsuse),etc.以前我们要添加一个布尔属性,我们使用类似如下的JS代码:dialog.setAttribute('open','');删除布尔属性值是使用:dialog.removeAttribute('open');而toggle切换一个布尔属性值,JS需要先判断当前属性的布尔状态,然后选择是setAttribute还是removeAttribute,还是很啰嗦的。现在,有了toggleAttribute()方法,所有的布尔属性操作都可以只用一个API完成。例如,要添加一个布尔属性,可以这样设置:dialog.toggleAttribute('open',true);删除一个布尔属性,也可以直接使用toggleAttribute方法:dialog.toggleAttribute('open',false);布尔属性值,它更像是toggleAttribute()的工作://如果有打开的属性,则将其移除;如果没有open属性,添加dialog.toggleAttribute('open');API方法一杀,代码大大简化,实用性极强。3.语法、参数和示例toggleAttribute()方法的语法如下:Element.toggleAttribute(name[,force]);其中:name需要切换显示的布尔属性名称,可以是自定义规范中没有的属性。例如:document.body.toggleAttribute('zhangxinxu');会有如下截图所示的效果,你会看到在元素上多了一个'zhangxinxu'属性。force布尔值。如果为true,则强制将该属性设置为true,即添加该属性;如果为false,则表示移除布尔属性。当我们在执行toggleAttribute()方法后想知道元素是否有这个属性时,可以使用toggleAttribute()方法的返回值。返回值letisHasAttribute=Element.toggleAttribute(name);如果toggleAttribute()方法的执行是添加属性,则isHasAttribute的值为true,否则为false。例子一个简单的例子展示toggleAttribute的使用,相关代码如下:disablebutton.addEventListener('click',_=>{input.toggleAttribute('禁用');});实现的效果如下:其中,点击按钮的文字变化由CSS选择器控制:/buttontextchange/:disabled~button{-webkit-text-fill-color:transparent;}:disabled~button::before{position:absolute;content:attr(value);-webkit-text-fill-color:currentColor;}4.polyfill和conclusion还不错,因为toggleAttribute比较新,才2年因为出道,所以还是个新人。因此不适合在大型对外项目中直接使用。不过,不用担心,引入一个小的polyfill代码就可以了。以下Polyfill代码来自MDN文档:.hasAttribute(name)){if(force)returntrue;this.removeAttribute(名字);返回false;}if(force===false)returnfalse;this.setAttribute(name,"");returntrue;};}这段代码可以放在业务代码之前的任意位置。—