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:
<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />
$('#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;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />Here’s a plain Javascript implementation of the above for those who require it:
document.querySelector('#image').addEventListener('click', () => {
document.querySelector('#foo').classList.add('myClass');
}); .myClass {
background-color: red;
color: white;
font-size: 44px;
}<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />