jQuery动态地更改CSS - 简单！-js教程-PHP中文网

jQuery动态地更改CSS - 简单！

钥匙要点

> jQuery提供了一种简单的方法，可以使用.css（）函数在网站上动态更改CSS样式，以修改特定属性，例如颜色，浮点，背景色等等。除了修改现有的CSS样式外，jQuery还允许通过.removeclass（）方法删除样式，并根据其当前值（例如填充或边距）的现有样式扩展。

CSS功能演示现在，动态更改您的网站样式是接管网络的热潮！在这个简短但甜美的帖子中，我将解释如何使用jQuery进行一些简单而有效的CSS技巧。这是您所有狂热的jQuery开发人员必须知道的！

更改特定的CSS元素

使用jQuery更改CSS确实很容易，这是.css（）函数的格式。

<span>$('jQuery selector').css({"css property name":"css property value"});</span>

登录后复制

以下是一些常见的例子：

<span>//change paragraph text colour to green 
</span><span>$('p').css({"color":"green"});
</span>
<span>//float all divs with class .left
</span><span>$('div.left').css('float');
</span>
<span>//change all elements with class .bg-red to have a red background
</span><span>$('.bg-red').css({"background-color":"red"});</span>

登录后复制

嵌套您的jQuery CSS命令

知道jQuery可以同样解释多个字属性的CSS和DOM格式，这很方便。这不仅可以节省很多时间，而且看起来更漂亮！

newimg<span>.css({'background-image': 'url('+newimgsrc+')'});
</span>newimg<span>.css({'position': 'absolute'});
</span>newimg<span>.css({'height': '70px'});
</span>newimg<span>.css({'width': '200px'});
</span>newimg<span>.css({'top': '68px'});
</span>newimg<span>.css({'right': '2px'});</span>

登录后复制

与：

newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>

登录后复制

>删除CSS样式

删除CSS样式的主要方法有两种主要方法。 1。您可以删除与页面或元素关联的类

<span>//remove text color from a div
</span><span>$('#mydiv').removeClass('colors');</span>

登录后复制

2。您还可以直接删除某些元素的CSS样式

<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>

登录后复制

这也是一个精美的jQuery CSS技巧，可以在同一呼叫中删除和添加类。

<span>//change text color from red to green (classes specified in stylesheet)
</span><span>$('#div').removeClass('red').addClass('green');</span>

登录后复制

扩展现有样式值

您可能希望仅根据其当前价值扩展样式。例如，如果元素的填充左为10px，则以下代码将导致总填充左为25px。

<span>.css( "padding-left", "+=15" )</span>

登录后复制

> jquery .css（）function属性

正如大多数狂热的jQuery开发人员所知道的那样，从jQuery 1.4开始，.css（）允许我们将函数作为属性值传递。这对于返回当前CSS值以确定更改非常方便。

<span>$('div.example').css('width', function(index) {
</span>  <span>return index * 50;
</span><span>});</span>

登录后复制

常见的背景CSS变化

以下是改变背景CSS的一些示例。

<span>$('#myDiv').css('background-image', 'my_image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css('background', 'path/to/image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css("background-image", "url(/myimage.jpg)");  
</span>
<span><br /><br />
</span><span><h2>A Full Code Example - Set Div Background Image</h2>
</span><span>This is a full example of jQuery Code to set a background image into a div dynamically when the page is loaded.
</span>
<span>[code lang="js"]
</span><span><script type='text/javascript'>
</span><span>$(document).ready(function() {
</span>	<span>//preload image (add timestamp to prevent cache)
</span>	<span>var newimgsrc = 'https://www.sitepoint.com/wp-content/uploads/jquery4u/2011/03/jquery-plugins2.jpg?' + (new Date().getTime());
</span>	<span>var newimg = $('#header');
</span>    <span>//replace the image
</span>	<span>$('#header').css("background-image", "url("+newimgsrc+")");
</span>	newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});
</span>	newimg<span>.show();
</span><span>});
</span><span></script></span>

登录后复制

经常询问有关使用jQuery

更改CSS的问题

>我如何使用jQuery一次更改多个CSS属性？

jQuery允许您使用.css（）方法同时更改多个CSS属性。此方法接受一个对象，您可以在其中定义多个CSS属性及其新值。以下是一个示例：

$（“ p”）。css（{
“背景色”：“ yellow”，
“ font-size”：“ 200％”
>}）;
在此示例中，在此示例中，所有段落元素都将其背景颜色变为黄色，并将其font and i jeqle添加到200％

是的，jQuery提供了.addclass（）方法，该方法允许您在所选元素中添加一个或多个类。当您有预定义的CSS课程并且想动态应用它们时，这特别有用。您可以做到这一点：

$（“ p”）。addClass（“亮点”）;
在此示例中，“亮点”类将添加到所有段落元素中。
>

>如何使用jQuery？

> jQuery从元素中删除CSS类，提供.removeclass（）方法以从所选元素中删除一个或多个类。 Here’s an example:

$("p").removeClass("highlight");
In this example, the “highlight” class will be removed from all paragraph elements.

Can I Toggle CSS Classes on Elements Using jQuery?

Yes, jQuery provides the .toggleClass() method which allows you to add a class if it’s not already出现，或删除它。以下是一个示例：

$（“ p”）。toggleclass（“亮点”）;
在此示例中，“亮点”类将在所有段落元素上进行切换。

>

>我如何获得使用jquery的当前属性值的当前值？您只需要将属性名称作为字符串传递。以下是一个示例：

var color = $（“ p”）。css（“ color”）;
在此示例中，第一个段落元素的当前颜色将存储在“ color”变量中。

>我可以使用jQuery来根据其当前值来更改CSS属性？每个选定的元素都会调用此函数，其返回值将用作属性的新值。以下是一个示例：

$（“ p”）。css（“ font-size”，函数（索引，值）{
>返回parsefloat（value） * 1.2“ px”;
}）;
在此示例中，在此示例中，所有代表元素的大小都会增加j的font in Anim je，可以增加20％。属性？

是的，jQuery提供了.aimate（）方法，该方法允许您通过随着时间的推移更改CSS属性来创建自定义动画。 Here’s an example:

$("p").animate({
"opacity": 0.5,
"font-size": "200%"
}, 2000);
In this example, the opacity and font size of all paragraph elements will be animated over 2 seconds.

How Can I Use jQuery to Change CSS Properties on Hover？

>您可以将.hover（）方法与.css（）结合使用时，将鼠标指针徘徊在元素上时更改CSS属性。以下是一个示例：

$（“ p”）。悬停（function（）{
$（this）.css（“ color”，“ color”，“ red”>}，function（）{
$（
$（this）.css（this）.css（cold）当鼠标指针离开时，将其重置为原始颜色。

我可以使用jQuery在单击时更改CSS属性？以下是一个示例：

$（“ p”）。单击（function（）{

$（this）.css（“ color”，“ red”，“ red”）;

}）;

在此示例中，段落的颜色将在段落中更改为红色时，当它们被单击时。

>我如何使用jQuery在滚动上更改CSS属性？

>您可以将.scroll（）方法与.css（）结合使用时将用户滚动页面滚动时更改CSS属性。这是一个示例：

$（window）.scroll（function（）{ $（“ p”）。css（“ color”，“ color”，“ red”）;
}）;
>在此示例中，所有段落的颜色所有段落的颜色都会更改为所有段落元素，当用户scrolls scrolls page the page the page。

以上是jQuery动态地更改CSS - 简单！的详细内容。更多信息请关注PHP中文网其他相关文章！