css - flex-like states in CSS/grabbing multiple id-ed elements at once

Question

Suppose I have a ui with a button. The ui has four states, each with the button in a different corner.

In Flex, this is easy to achieve, you simply define these four states (topLeft, topRight, bottomRight, bottomLeft), and each has an override for the button's position values.

How would you do this using CSS in a way that can be triggered by a simple assignment?

Flex: skin.currentState="topRight" JS: ???

I've defined the classes in css:

#button.topRight {...}
#button.topLeft{...}
#button.bottomRight {...}
#button.bottomLeft {...}

Now, without having to know of the existence of #button, how in one line of code can I apply one of the four states to all the elements on the page that have that state defined?

Answer 1

jQuery在 JavaScript 中提供了一个方便的抽象层，因此：

$('.someClassName').addClass('blueOnLeft')  
$('.someClassName').removeClass('blueOnLeft')

这将针对每个类名为“someClassName”的元素。