首先,使用on*
属性添加事件处理程序是实现所需功能的一种非常过时的方法。当您使用jQuery标记问题时,这是一个jQuery实现:
<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'
});
});
一种更有效的方法是将这些样式放入一个类中,然后将该类添加到onclick上,如下所示:
$('#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" />