jquery如何修改range::-webkit-slider-runnable-track中的background-position属性

jquery如何修改range::-webkit-slider-runnable-track中的background-position属性,第1张

$("input[type=range]::-webkit-slider-runnable-track")css({

    "background-position-x": "200px"

});

可以通过很多方式获取:id,name,class等都可以获取

$("#id")attr("自定义属性")

$("input[name="名称"]")attr("自定义属性")

$("class")attr("自定义属性")

模式就是这样的

这个一般是用css来显示特定内容的。

譬如有张iconpng,里面有很多内容,便可以在css中这么用。

sa

{width:20px;

height:20px;

overflow:hidden;

background:url(iconpng)

no-repeat

-20px

-30px;}

注解:

宽度和高度是控制显示范围的

overflow:hidden是确保不会有多余显示

background:url(iconpng)是使用作为背景显示,并且也只能作为背景显示才能达到这种做法的目的

no-repeat是不会重复,这个不是必须的,不过有会规范一些

-20px

-30px是的定位,显示时会将按这个坐标来定位

上面只是针对固定大小的显示内容来定义的,如果大小不固定,在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。

如果大小不固定,也可以这样定义,让背景自适应:

sa

{width:auto;

height:20px;

overflow:hidden;

background:url(iconpng)

no-repeat

right

bottom;}

对于2(首页标签)的内容,也是这么使用的:

a

{width:100px;

height:25px;

overflow:hidden;

background:url(2png)

no-repeat

left

center;}

a:hover

{background-position:right

center;}

这样一来,当鼠标移到元素时,背景定位发生变化,显示的内容便由左边的变成右边的了。

不过你应该对css这方面还不是很了解,目前可能还没有很便捷的方式对这些css进行快速定义,所以也只能告诉你是这么一回事,但未必能帮得上你。

jquery获取除某指定对象外的其他对象

not()

遍历方法

从匹配元素集合中移除元素

:not()

选择器

选取除了指定元素以外的所有元素。

<ul>

<li>list

item

1</li>

<li>list

item

2</li>

<li

id="unwanted">list

item

3</li>

<li>list

item

4</li>

<li>list

item

5</li>

</ul>

获取ul中除

id="unwanted"

的其他所有

li

$('li:not(#unwanted)')css('background',

'red');

$('li')not('#unwanted')css('background',

'red');

总结

以上所述是小编给大家介绍的jQuery

获取除某指定对象外的其他对象

(

:not()

与not()),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:jQuery判断指定id的对象是否存在的方法Jquery

获取指定标签的对象及属性的设置与移除

以上就是关于jquery如何修改range::-webkit-slider-runnable-track中的background-position属性全部的内容,包括:jquery如何修改range::-webkit-slider-runnable-track中的background-position属性、如何用jquery获取页面中的自定义标签、如何用JS/JQ实现,点击小图片显示大图片及详细信息的功能等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10132571.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-05
下一篇2023-05-05

发表评论

登录后才能评论

评论列表(0条)

    保存