单击更改CSS属性

• Z时代
• 2024-01-10
• 分类：问答

我试图在单击另一个元素时更改一个元素的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" />

以上是 单击更改CSS属性 的全部内容， 来源链接： utcz.com/qa/398859.html