Reputation: 2963
I have a little code below. When I click on the button, my class square
will have an inline style <div class="square" style="display: block;"></div>
Based on this inside style, I will have some more properties for the class square
such as: left: 0
. In other words, when class square
has a style="display: block;"
, I need to have more stylings for it. But I don't know how to write more CSS on this situation.
NOTE: I know I could write more class properties inside this javascript for what I need, but in this case, this javascript function is not on my hand. My job is to add more properties style when the square
has style="display: block;"
Please give a hand. Thanks!
$(function() {
$('button').click(function() {
$('.square').css('display', 'block');
})
})
.square {
width: 100px;
height: 40px;
background-color: gray;
position: absolute;
left: -100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="square"></div>
</div>
<button>Click Me</button>
Upvotes: 0
Views: 168
Reputation: 67799
You could add a class with selector .square[style="display: block;"]
and the desired properties (I added a red border for demonstration purposes in my snippet below) to your stylesheet which will be applied automatically when the element gets that inline style="display: block;"
attribute on clicking the button:
$(function() {
$('button').click(function() {
$('.square').css('display', 'block');
})
})
.square {
width: 100px;
height: 40px;
background-color: gray;
position: absolute;
left: 100px;
}
.square[style="display: block;"] {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="square"></div>
<button>Click Me</button>
Upvotes: 1