I want to give the script to add "Class=C" to "Class=B" when "Class=A" has "position: absolute" style.

I want to give the script so that when "Class=A" has the style "position: absolute", it adds the style "bottom: 0px" to "Class=B".

I'm not familiar with scripts.

I've tried the code attached below, but it doesn't work.

How do I give a script like 01 or 02?

please help..!

※I used a translator because I couldn't speak English. That is why my words may not be natural. Please understand.

$(function(){ 
    if ($('.A').css('position' == 'absolute')) {
        $('.B').addClass('C');
    }
    else {
        $('.B').removeClass('C');
    }
});

CodePudding user response：

this should work as you expect

$(document).bind('DOMSubtreeModified', function () {
    if ($('.A').css('position') == 'absolute') {
        $('.B').addClass('C');
    }
    else {
        $('.B').removeClass('C');
    }
});

Edit 1

The above code will run whenever the DOM structure changes. The delay is caused by something on your side, after the dom changes it will call the above function.

Edit 2

You could try this, but it may not work

$(document).bind('change', function () {
    if ($('.A').css('position') == 'absolute') {
        $('.B').addClass('C');
    }
    else {
        $('.B').removeClass('C');
    }
});

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
    .A {
        position:absolute
    }   
    .C {
        color:red
    }
</style>
<script>
$(document).ready(function(){
    if ($('.A').css('position') == 'absolute') {
        $('.B').addClass('C');
    }
    else {
        $('.B').removeClass('C');
    }
});
</script>
</head>
<body>
<p >如果你点我</p>
<p >继续点我!</p>
</body>
</html>