更改webkit-slider-thumb的背景图片由jquery [英] change background image of webkit-slider-thumb by jquery
问题描述
我搜索了一会儿,但找不到任何有用的。我有以下css
I searched for a while but couldn't find anything useful.I have the following css
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://www.w3schools.com/html/smiley.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
}
我可以从chrome控制台测试,我有一些像:
Now I want to change the background image to some other image src by the help of jquery or plain javascript which I can test from chrome console.So that I have something like:
`background-image: url('http://someotherimage/test.png'),`
任何人都可以提及正确的语法。
感谢您的回应。
Could anyone please mention the correct syntax. Thanking you in anticipation of favorable response.
推荐答案
我发布的解决方案,问题。因为我想改变-webkit-slider-thumb的css的飞行,所以我做了这样我使用一个类的输入,并添加CSS这个类像这样
I am posting solution which worked for me for anyone facing the same issue.As I wanted to change the css of the -webkit-slider-thumb on the fly so I did something like this I used a class for the input and added css for this class like this
.first_class::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://www.w3schools.com/html/smiley.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
background-position: 50%;
}
我还添加了另一组css下不同的类名, / p>
I also added the other set of css under a different class name like this
.second_class::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://someotherimage/test.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
background-position: 50%;
}
然后使用Jquery我改变了类,当我需要改变css,ie如果我删除 first_class
并添加 second_class
到输入,它将改变-webkit- slider-thumb
谢谢所有试图帮助的人。
Then using Jquery I changed the classes whenever I needed to change the css, i.e if I remove the first_class
and add second_class
to the input it will change the image of the -webkit-slider-thumb
Thankyou for all those who tried to help.
这篇关于更改webkit-slider-thumb的背景图片由jquery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!