Javascript CSS根据内联类条件编写附加类属性

下面我有一个小代码。当我点击按钮时，我的类

square

将具有内联样式

基于此内部样式，我将为类

square

提供更多属性，例如：

left:0

。换句话说，当类

square

具有

style=“display:block；”“

时，我需要为它提供更多样式。但我不知道如何在这种情况下编写更多的CSS

注意：我知道我可以根据需要在这个javascript中编写更多的类属性，但在这种情况下，这个javascript函数不在我手上。我的工作是在

square

具有

style=“display:block；”

请帮忙。谢谢

$（函数（）{
$（“按钮”）。单击（函数（）{
$（'.square'）.css（'display'，'block'）；
})
})

.square{
宽度：100px；
高度：40px；
背景颜色：灰色；
位置：绝对位置；
左：-100px；
}

单击“我”

您可以向样式表添加一个带有选择器

的类。square[style=“display:block；”]

和所需属性（我在下面的代码段中添加了一个红色边框用于演示）的类，该类将在元素获得内联

style=“display:block；”

单击按钮时的属性：

$（函数（）{
$（“按钮”）。单击（函数（）{
$（'.square'）.css（'display'，'block'）；
})
})

.square{
宽度：100px；
高度：40px；
背景颜色：灰色；
位置：绝对位置；
左：100px；
}
.square[style=“显示：块；”]{
边框：1px纯红；
}

单击我

Hi Johannes，非常感谢您的帮助，它按预期工作！我刚才投票选了你的答案作为我的感谢！昨天我忘记提到的另一件事是，当出现

style=“display:block；”“

时，如何为

square

的父级添加更多样式？请帮帮忙。CSS中没有父选择器，所以您必须使用JS/jQuery来实现这一点