javascript – 单击更改CSS属性

我试图在点击另一个元素时更改一个元素的CSS.我经常搜索,但没有任何效果.目前我使用下面的代码,但它不起作用.谁能告诉我我错过了什么？

<div id="foo">Hello World!</div>
<img src="zoom.png" onclick="myFunction()" />

function myFunction() {
    document.getElementById('foo').style.csstext = 'background-color: red; color: white; font-size: 44px';
}

解决方法:

首先,使用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" />