Javascript 单击时更改 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14319274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change CSS properties on click
提问by mobi001
I am trying to change the CSS of one element on click of another element. I've searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn't work. Can anyone tell me what I missed?
我试图在单击另一个元素时更改一个元素的 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';
}
回答by Rory McCrossan
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:
首先，使用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'
});
});
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" />回答by ATOzTOA
Try this:
尝试这个：
CSS
CSS
.style1{
background-color:red;
color:white;
font-size:44px;
}
HTML
HTML
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
Javascript
Javascript
function myFunction()
{
document.getElementById('foo').setAttribute("class", "style1");
}
回答by Kirandeep Singh
<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>
回答by Elwi
In your code you aren't using jquery, so, if you want to use it, yo need something like...
在你的代码中你没有使用 jquery，所以，如果你想使用它，你需要像......
$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});
Other way, if you are not using jquery, you need to do ...
其他方式，如果您不使用 jquery，则需要执行...
document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
回答by Mustafa Shujaie
With jquery you can do it like:
使用 jquery，您可以这样做：
$('img').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
this applies for all imgtags you should set an idattribute for it like imageand then:
这适用于所有img标签，您应该id为它设置一个属性image，然后：
$('#image').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
回答by Barry Kaye
Try this:
尝试这个：
$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
回答by Mihai Matei
<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />
JS
JS
$('#click_me').click(function(){
$('#foo').css({
'background-color':'red',
'color':'white',
'font-size':'44px'
});
});
