javascript 如何在单击时更改 css 背景图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24460031/
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
How to change css background-image on click?
提问by Minimal Code
I'd like to change the css "background-image:" when someone clicks a button.
当有人单击按钮时，我想更改 css“背景图像：”。
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
我不确定是否可以通过 css 更改它，或者是否需要合并 java 脚本。另外，如果我需要 java 脚本，我需要什么类型的代码？
My current work around is with css and it looks like:
我目前的工作是使用 css，它看起来像：
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}
回答by darcher
I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
我会像这样接近它。http://jsfiddle.net/darcher/6Ex7h/
jquery
查询
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
通过这些不同的状态，您可以做任何您需要的事情。还有多种其他状态可以使用http://api.jquery.com/category/events/mouse-events/
html
html
<div href="#" class="img bg"></div>
css
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/
只有 css 替代方案，但它们在支持方面并不是很好：http: //tympanus.net/codrops/2012/12/17/css-click-events/
回答by photodow
1. CSS pseudo-class selector:active
1. CSS 伪类选择器：active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
如果你不关心持久性，你总是可以使用伪类“:active”。只要您按下鼠标，图像就会受到影响。只要你鼠标向上它就会恢复。目前，这与您在 CSS 中所能获得的差不多。
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
JSFiddle 示例：http: //jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
2. 使用 JavaScript 更改样式属性
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
JavaScript 几乎是您能够单击对象、鼠标悬停并且背景仍然改变的唯一方式。JavaScript 也为您提供了几种方法。
You can use JavaScript to change the object's style attribute to update the 'background-image'.
您可以使用 JavaScript 更改对象的样式属性以更新“背景图像”。
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
JSFiddle：http: //jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
3. 使用 JavaScript 更改类属性
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
或者类似地，您可以在 CSS 中创建两个类，并使用 JavaScript 更新对象的类属性。
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
JSFiddle：http: //jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.
我个人最喜欢的方法是第三个选项，您仍然使用 CSS 来设置不同状态下的 obj 样式，然后使用 JavaScript 更改类名以更新这些状态。它更少 JavaScript，更多 CSS，并且您将所有内容保留在适当的位置。
回答by Trinity
You could use javascript for change the background. The following website javascripteris an example of changing background color and manipulating CSS by Javascript. I hope this can help you.
您可以使用 javascript 来更改背景。以下网站javascripter是通过 Javascript 更改背景颜色和操作 CSS 的示例。我希望这可以帮助你。
回答by MickyScion
$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
你必须这样做，有一个相关的问题看到这个我希望我能帮助你......
回答by HymanW
There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
在纯 HTML/CSS 中无法做到这一点，但在 javascript 中你可以这样做：
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script>tag or add it to a .jsfile and include that by adding <script src="scriptName.js"></script>
您可以将其包含在<script></script>标签中或将其添加到.js文件中，然后通过添加<script src="scriptName.js"></script>
回答by DRD
Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
这是一个仅限 CSS 的解决方案：http: //jsfiddle.net/VVj6w/
HTML
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}
回答by Rich Remer
If you only want it to change while you are clicking, you should be able to use
如果您只想在单击时更改它，则应该可以使用
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
如果您希望在单击后（释放鼠标按钮后）保持这种状态，则必须使用 javascript。类似于以下内容
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
然后在 CSS 中，将选择器更新为
.hello-button.clicked
