如何观察HTML类的变化来改变HTML属性的内在

Question

我正在尝试更改网页上的一个数字，以便在 DIV 元素的 classes 发生变化时显示当前页码。

    <div id="fullpage">
        <div class="hover_color"></div>
        <div id="main_wrapper">
            <!--Section 1-->
            <div class="section" id="section0">
                <h1>Hello.</h1>
            </div>

我正在使用 fullpagejs 插件，它会动态添加 classnames 到当前查看的部分；在这种情况下，class = "section" 更改为 class="section fp-section active fp-completely".

在此标记之外是另一个 div 和 position:fixed

    <div id="inc" class="inc_num">
            <p>00.</p>

    </div>

我希望在第二部分处于活动状态时将 01 的值更改为 02，而在第三部分处于活动状态时将 02 的值更改为 03。

我运行这个javascript达到这个结果。

const numberShow = function() {
const detectSection = document.getElementsByClassName('section fp-section active fp-completely')[0].id;
const inc = document.getElementById('inc');

switch (detectSection) {
    case section0:
        inc.innerHTML = '00.';
    case section1:
        inc.innerHTML ='01.';
        break;
    case section2:
        inc.innerHTML ='02.';
        break;
    case section3:
        inc.innerHTML ='03.';
        break;
    case section4:
        inc.innerHTML ='04.';
        break;
    case section5:
        inc.innerHTML ='05.';
        break;
    case section6:
        inc.innerHTML ='06.';
        break;

    default:
        break;
}
};
//Call numberShow every 500 millisecs to check current active class and 
//change the number
setInterval(numberShow(), 500);

然而，这不起作用

Answer 1

你应该检查 MutationObserver

它正在做你想要的

Answer 2

    let detectSection, detectFooter, section, footer;
    const numberShow = () => {
    detectSection = document.getElementsByClassName('section fp-section active 
    fp-completely');
    if(detectSection !== null){
    section = detectSection[0].id;
    }else{
    detectFooter = document.getElementsByClassName('section fp-auto-height fp- 
    section active fp-completely');
    footer = detectFooter[0].id;
    }
    const num = document.getElementById('inc');


    if(section == 'section0'){
    num.innerHTML ='<p>00.</p><b></b>'; 
     } else if(section == 'section1'){
    num.innerHTML ='<p>01.</p><b></b>'; 
    }else if(section == 'section2'){
    num.innerHTML ='<p>02.</p><b></b>'; 
    }else if(section == 'section3'){
    num.innerHTML ='<p>03.</p><b></b>'; 
    }else if(section == 'section4'){
    num.innerHTML ='<p>04.</p><b></b>'; 
    }else if(section == 'section5'){
    num.innerHTML ='<p>05.</p><b></b>'; 
    }else if(section == 'section6'){
    num.innerHTML ='<p>06.</p><b></b>'; 
    }else if(section == 'section7'){
    num.innerHTML = '';
    }
    }
    setInterval(numberShow, 200);

Answer 3

使用 observe() method of the MutationObserver 接口，使用 attributeFilter 选项，指定要监视的属性名称（class 在你的情况下）：

const observedElement = document.getElementById("observed-element");

const classObserver = new MutationObserver(() => {
  console.log("The class attribute has changed")
});

classObserver.observe(observedElement, {attributeFilter: ["class"]});

const observedElement = document.getElementById("observed-element");

const classObserver = new MutationObserver(() => {
  renderClasses();
  alert("The class attribute has changed");
});

classObserver.observe(observedElement, {attributeFilter: ["class"]});

const toggleClassButton = document.getElementById("toggle-class");
toggleClassButton.addEventListener("click", () => {
  observedElement.classList.toggle("another-class");
});

function renderClasses() {
  const classes = observedElement.classList;
  const classListElement = document.getElementById("class-list");
  classListElement.innerText = classes;
}

renderClasses();

p {
  margin-block: 10px;
  padding: 10px;
  width: fit-content;
  background: lightgreen;
  border: 1px solid green;
  border-radius: 3px;
}

span {
  color: red;
}

button {
  padding: 10px;
}

<p id="observed-element" class="one-class">I'm the element observed and my classes are: <span id="class-list"></span></p>
<button id="toggle-class">Toggle class "another-class"</button>

如果您想观察所有属性修改，您可以将 attributes 选项设置为 true 而不是 attributeFilter:

classObserver.observe(observedElement, {attributes: true});

如何观察HTML类的变化来改变HTML属性的内在

How to observe changes in HTML classes to change the innerHTML property

javascript

html

dom-manipulation