I am trying to change the CSS of one element on click of another element. I\'ve searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn
Firstly, using on*
attributes to add event handlers is a very outdated way of achieving what you want. As you've tagged your question with jQuery, here's a jQuery implementation:
hello world!
$('#image').click(function() {
$('#foo').css({
'background-color': 'red',
'color': 'white',
'font-size': '44px'
});
});
A more efficient method is to put those styles into a class, and then add that class onclick, like this:
$('#image').click(function() {
$('#foo').addClass('myClass');
});
.myClass {
background-color: red;
color: white;
font-size: 44px;
}
hello world!
