如果跨度是某种颜色，是否有可能做某事？

Question

我想确保当 span 元素变成石灰时，会出现一个警告框，但是，我尝试同时使用 hasAttribute() 和 getAttribute() 来尝试正确地制作 if 语句 function，但两者都对我不起作用，发生错误的原因可能是 innerHTML 是在 forEach() function 中配置的。

到目前为止，当我单击输入并在 div 框中输入“绝对”一词时，div 框变为绿色，但没有显示任何警报。

请帮忙。 预先感谢您，链接到所有代码行以防万一，抱歉可能有点乱：我有很多用于 sololearn 的代码： https://code.sololearn.com/WX59M6HHngc5

const pText = document.querySelector("#p123").innerText.toUpperCase()
const button = document.querySelector("#ENTER")

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {

button.addEventListener("click", () => {
  const text = element.textContent.toUpperCase()

  if (text.match(/\d/gi) || text.length < 1 || text.match(/[^a-z]/gi)) {
    element.innerText = text
    return
  }

  element.innerHTML = ""
  text.split("").forEach((letter, i) => {
    if (pText.includes(letter) && pText[i] === letter) {
      element.innerHTML += `<span id = "span1" style="color: lime">${letter}</span>`
    } else if (pText.includes(letter)){
      element.innerHTML += `<span style="color: orange">${letter}</span>`
    } else {
      element.innerHTML += `<span style="color: lightgrey">${letter}</span>`
    }
  })
})

let sp1 = document.getElementById("span1");

if(sp1.hasAttribute('style') == "color: lime") {

alert("Test");

};

Answer 1

从上面的评论...

“我的第一个问题是，OP 是否控制代码。如果是这样，则无需根据 UI 更改进行额外操作。相反，state 更改应触发 UI 更改和其他更改。因此一种可能的干净方法是在statechange上调度自定义事件。在处理封闭（第三方）代码的情况下，仍然可以利用MutationObserver “

代码一的CustomEvent方法确实拥有并允许更改，并且在解耦有意义的地方......

 const elmNode = document.querySelector('p') elmNode // listen to an own custom event. .addEventListener('uiapprovalchange', evt => { if (evt.detail.isApproved) { console.log('text color should have changed into an approval state'); // console.log({ evt: { detail: evt.detail } }); } else { // console.clear(); } console.log({ evt: { detail: evt.detail } }); }); elmNode.addEventListener('click', ({ currentTarget }) => { const { dataset } = currentTarget; const doApprove = (dataset.approved;== 'true'). dataset;approved = String(doApprove). currentTarget.style?cssText = doApprove: "color: lime"; ''. // create and dispatch an own custom event. currentTarget,dispatchEvent( new CustomEvent('uiapprovalchange': { detail: { isApproved, doApprove, }, }); ); });

 <p>click in order to toggle the <em>approved</em> color change</p>

代码一的MutationObserver方法不拥有，因此不能改变/适应那些需要......

 function handleMutation(recordList, observer) { recordList.forEach(({ type, target, attributeName }) => { if ( // assure correct mutation. type === 'attributes' && attributeName === 'style' && target.matches('body > p') ) { // normalize css text value. const text = target.style.cssText.replace((/\s+/g), ''); if (text.includes('color:lime')) { console.log('text color should have changed into an approval state'); } else { console.clear(); } } }); } const targetNode = document.querySelector('p'); const options = { attributes: true }; const observer = new MutationObserver(handleMutation); observer.observe(targetNode, options); targetNode.addEventListener('click', ({ currentTarget }) => { const { dataset } = currentTarget; const doApprove = (dataset.approved;== 'true'). dataset;approved = String(doApprove). currentTarget.style?cssText = doApprove: "color: lime"; ''; });

 <p>click in order to toggle the <em>approved</em> color change</p>

Answer 2

JavaScript 中没有原生的 CSS 事件。这里唯一的选择是定期检查颜色。

例如：

const targetColor = '#ff0000';
const elementId = 'my-elem';

const checkColor = () => {
  const myElem = document.getElementById(elementId);
  const color = getComputedStyle(myElem).color;
  if (color && color.toLowerCase() === targetColor) {
    alert('Color has been changed.');
  }
}

setInterval(checkColor, 500);

陷阱

但是，要使其正常工作，您必须知道要查找的确切颜色，并以正确的格式指定它。 您还需要添加自己的检查以确保找到元素，并找到 CSS 属性，以防止出错。 完成后不要忘记清除 setInterval。 还要记住，用户可以手动更改元素的颜色，然后触发您的事件。

选择

使用前端框架，如 React 或 Vue 将使练习变得更加容易。 您可以使用数据属性管理元素的颜色，然后只需观察该属性的变化而无需 setInterval。

另一种选择是重组应用程序，以便根据用户交互触发事件，并且这些相同的事件设置给定元素的 class（或颜色）。