javascript - 如何取得html標籤中的節點?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-19 10:34:54
0
4
770

如果用點擊事件的話,可以event來找出目前的節點。
但是,如果不綁定事件的話,怎麼實作在p標籤裡面取得目前的p節點

<p>这是一个段落</p>

我的需求是透過捲軸滾動到不同的節點的時候,v-show=true

<p ref='pBox'>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落1</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落2</p>
    <p v-show='body.scrollTop === 当前节点.offsetTop'>这是一个段落3</p>
</p>
export default {
    computed: {
        body: this.$refs.pBox.offsetParent
    }
}
曾经蜡笔没有小新
曾经蜡笔没有小新

全部回覆(4)
Peter_Zhu

你可以使用 自訂指令 實現,Demo:
https://jsfiddle.net/fedesign...

给我你的怀抱

scrollTopoffsetTop都是变量。
你要不绑定scroll事件的时候把bodyscrollTop和所有需要的poffsetTop都获取下存到data裡?
然後

<p ref='pBox'>
    <p v-show='bodyScrollTop === offsetTop.p1'>这是一个段落1</p>
    <p v-show='bodyScrollTop === offsetTop.p2'>这是一个段落2</p>
    <p v-show='bodyScrollTop === offsetTop.p3'>这是一个段落3</p>
</p>

不過我對效果有點疑問,就是好幾個p未顯示的時候他們的offsetTop是不是同一個值。 p未显示的时候他们的offsetTop是不是同一个值。
然后我想知道你的p然後我想知道你的p節點指的是什麼?文字節點?

我想大声告诉你

雷雷

给我你的怀抱

謝謝各位的回答,最終的解決方案為:

// animated bounceIn 为animated.css里的
<section class="newBlog" v-scroll-show>
    <p class="title animated bounceIn">
        <p class="headline">最近更新</p>
    </p>
    <p class="posts">
        <p>文章</p>
    </p>
</section>
.title, .posts {
    display: none;
}
    directives: {
        scrollShow: {
            bind: (el) => {
                window.addEventListener('scroll', () => {
                    if (document.body.scrollTop + 400 > el.offsetTop) {
                        for (let i = 0; i < el.children.length; i++) {
                            setTimeout(() => {
                                el.children[i].style.display = 'block'
                            }, 1000 * i)
                        }
                    }
                })
            }
        }
    }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板