JS-根据父元素的类来改变元素的classid。

Question

我想根据父元素的类来改变子元素的类。

比如说

<div class="change">
    <div class="show-more"></div>
</div>

如果父类是 class="change" 然后将子类改为 class="show-none"

<div class="change">
    <div class="show-none"></div>
</div>

而我如何也能做到改变孩子的ID，例如

<div class="change">
    <div id="show-more"></div>
</div>

到

<div class="change">
    <div id="show-none"></div>
</div>

如何才能做到这一点？

Answer 1

你可以使用CSS选择器和classlist属性。

如果你想为一个元素做这件事，那么你可以使用CSS选择器和classlist属性。

let el = document.querySelector('.change .show-more')
el.classList.remove('show-more')
el.classList.add('show-none')

如果你想对所有符合这个选择器的元素做这件事：

document.querySelectorAll('.change .show-more').forEach(el => {
    el.classList.remove('.show-more')
    el.classList.add('show-none')
})

Answer 2

使用Javascript

<div class="change">
    <div class="show-more"></div>
</div>

<script>
    const allParentElement = document.getElementsByClassName('change');
    const child = document.querySelector('.show-more');

    for (const parentElement of allParentElement) {
        if (parentElement.contains(child)) {
            child.classList.add('show-none');
            child.classList.remove('show-more');
        }
    }
</script>