资讯专栏INFORMATION COLUMN

Javascript拿到里目标元素最近的符合条件的祖先元素

Flands / 2393人阅读

摘要:两种方法方法通过递归配合获取我们找一个离最近的类名为的祖先元素通过去判断的父一级的类名是否为,如果不是,则将当前元素作为子元素向上查询,以此类推直到查询到结果效果方法采用事件源,简单介绍下呐

两种方法

方法1 通过递归配合parentNode、getAttribute获取

     我们找一个离span最近的类名为aaa的祖先元素
     通过span..parentNode.getAttribute("class")=="aaa" 去判断span的父一级的类名是否为aaa,如果不是,则将当前元素作为子元素向上查询,以此类推直到查询到结果()

##

效果:

方法2 采用事件源 event,简单介绍下

呐~~~~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106803.html

相关文章

  • 重塑你CSS世界观——浮动魔鬼float

    摘要:而在文档流中,如果浮动元素和跟随元素都是元素,它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流,如果父元素没有指定高度或者其他元素撑起,也就出现了所谓的浮动元素的父元素高度塌陷。 为什么要写《重塑你的CSS世界观》系列文章 由于从工作到现在,我的主要工作都是写JavaScript,几乎没怎么碰CSS,通常都是别人写好界面,然后我来开发JavaScript逻辑代码,这导致了严重...

    joyqi 评论0 收藏0
  • 重塑你CSS世界观——浮动魔鬼float

    摘要:而在文档流中,如果浮动元素和跟随元素都是元素,它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流,如果父元素没有指定高度或者其他元素撑起,也就出现了所谓的浮动元素的父元素高度塌陷。 为什么要写《重塑你的CSS世界观》系列文章 由于从工作到现在,我的主要工作都是写JavaScript,几乎没怎么碰CSS,通常都是别人写好界面,然后我来开发JavaScript逻辑代码,这导致了严重...

    frank_fun 评论0 收藏0
  • CSS Sticky 其实很简单

    摘要:大致步骤如下监听滚动事件,计算目标元素距离视口的距离。距离满足条件时,创建占位元素,修改目标元素定位方式为。仅仅为了实现这个效果页面上没有其他内容大动干戈性价比很低。对症下药,让滚动发生在被误匹配上的祖先元素内即可恢复。为什么要写这篇文章 Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期。决定写篇文章重新...

    番茄西红柿 评论0 收藏0
  • CSS Sticky 其实很简单

    摘要:大致步骤如下监听滚动事件,计算目标元素距离视口的距离。距离满足条件时,创建占位元素,修改目标元素定位方式为。仅仅为了实现这个效果页面上没有其他内容大动干戈性价比很低。对症下药,让滚动发生在被误匹配上的祖先元素内即可恢复。为什么要写这篇文章 Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期。决定写篇文章重新...

    davidac 评论0 收藏0
  • CSS——可视化格式模型

    摘要:控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中,框一个接一个地水平排列,起点是包含块的顶部。 CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示); 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局; 换句话说,盒子模型规定了怎么在页面上摆放盒子,盒子的相互作用等等; CSS的可视化格式模...

    nodejh 评论0 收藏0

发表评论

0条评论

Flands

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<