单击时更改 CSS 属性
Posted
技术标签:
【中文标题】单击时更改 CSS 属性【英文标题】：Change CSS properties on click 【发布时间】：2012-12-28 11:05:05 【问题描述】：我试图在单击另一个元素时更改一个元素的 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';
【问题讨论】：
你为什么不只是设置一个新类并在样式表中包含样式？ 你在什么浏览器上测试它？ JS控制台有错误吗？ 使用 jQuery :)，更简单 @epascarello 我在小提琴上尝试它只是为了运行这个简单的脚本 @Bandpay 我也在想..你能指导我任何链接吗 【参考方案1】：首先，使用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'
);
);
更有效的方法是将这些样式放入一个类中，然后在点击时添加该类，如下所示：
$('#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" />对于那些需要它的人来说，这是上面的一个简单的 javascript 实现：
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" />【讨论】：
这个答案使用 jQuery，但问题是使用纯 Javascript。这可能就是为什么它也会让一些尝试使用它的人感到困惑。 @orrd OP 在问题中标记了 jQuery，我说这是一个解决方案的 jQuery 实现。究竟是谁被它弄糊涂了？我没有看到任何 cmets 要求任何澄清？ 这并不能回答 OP 的问题，即为什么他们的代码不起作用。 @RobG 那是因为 OP 中没有足够的信息来诊断问题。 OP 给出的例子工作得很好（jsfiddle.net/k9rL517m）。我的第一个假设是myFunction() 没有在onclick 事件属性的范围内声明，即。不在window 内，但这只是一个假设
一个javascript代码可以比jquery更好【参考方案2】：
<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />
JS
$('#click_me').click(function()
$('#foo').css(
'background-color':'red',
'color':'white',
'font-size':'44px'
);
);
【讨论】：
【参考方案3】：使用 jquery 你可以这样做：
$('img').click(function()
$('#foo').css('background-color', 'red').css('color', 'white');
);
这适用于所有img 标签，您应该为其设置id 属性，例如image，然后：
$('#image').click(function()
$('#foo').css('background-color', 'red').css('color', 'white');
);
【讨论】：
【参考方案4】：试试这个：
$('#foo').css(backgroundColor:'red', color:'white',fontSize:'44px');
【讨论】：
【参考方案5】：试试这个：
CSS
.style1
background-color:red;
color:white;
font-size:44px;
HTML
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
Javascript
function myFunction()
document.getElementById('foo').setAttribute("class", "style1");
【讨论】：
【参考方案6】：在您的代码中，您没有使用 jquery，因此，如果您想使用它，您需要类似...
$('#foo').css('background-color' : 'red', 'color' : 'white', 'font-size' : '44px');
http://api.jquery.com/css/
其他方式，如果你不使用jquery，你需要做...
document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
【讨论】：
【参考方案7】：这段代码似乎运行良好（参见jsfiddle）。您的 javascript 是否在您的身体之前定义？
当浏览器读取onclick="myFunction()" 时，它必须知道myFunction 是什么。
【讨论】：
【参考方案8】： <script>
function change_css()
document.getElementById('result').style.cssText = 'padding:20px; background-color:#b2b2ff; color:#0c0800; border:1px solid #0c0800; font-size:22px;';
</script>
</head>
<body>
<center>
<div id="error"></div>
<center>
<div id="result"><h2> Javascript Example On click Change Css style</h2></div>
<button onclick="change_css();">Check</button><br />
</center>
</center>
</body>
【讨论】：
这是最好最简单的答案以上是关于单击时更改 CSS 属性的主要内容，如果未能解决你的问题，请参考以下文章