У меня есть некоторые проблемы с Jquery

Question

У меня есть некоторые проблемы с Jquery. У меня есть изменяемый размер div. Этот div - зеленый, если этот div больше 200px, он должен изменить свой цвет на красный. Можете ли вы помочь мне, как это сделать?

Answer 1

Вы можете сделать это с наблюдателями мутаций .Кажется, он имеет довольно хорошую поддержку среди всех основных браузеров

. Он слушает модификации DOM.

//get your element
const targetNode = document.getElementById('container');
//listen to attribute changes on the element
const config = { attributes: true };
//create the function which changes the color
const callback = (mutationsList, observer) => {
    const ele = $("#container");
    const width = ele.width();
    const height = ele.height();
    if(width > 200 || height > 200){
        ele.css("background-color", "red");
    } else if(width < 200 && height < 200){
        ele.css("background-color", "green");
    }
};

//Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

//Start observing the target node for configured mutations
observer.observe(targetNode, config);

#container {
    resize: both;
    overflow: auto;
    width: 100px;
    height: 100px;
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>