建设微信网站/抖音排名优化

jquery更改css

CSS功能演示

现在，动态更改网站样式已成为接管网络的热潮！ 在这篇简短而有趣的文章中，我将解释如何使用jQuery做一些简单而有效CSS技巧 。 这是所有狂热的jQuery开发人员必须知道的！

更改特定CSS元素

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

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

以下是一些常见示例：

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

嵌套您的jQuery CSS命令

知道jQuery可以平等地解释多词属性CSS和DOM格式是很方便的。 这不仅可以节省您很多时间，而且看起来更漂亮！

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

与以下内容完全相同：

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

删除CSS样式

删除CSS样式有两种主要方法，它们之间的差别不大。

1.您可以删除与页面或元素关联的类

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

2.您也可以直接删除某些元素上CSS样式

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

这也是在同一调用中删除和添加类的漂亮jQuery CSS技巧。

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

扩展现有样式值

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

.css( "padding-left", "+=15" )

jQuery .CSS（）函数属性

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

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

常见背景CSS更改

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

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

翻译自: https://www.sitepoint.com/change-css-jquery/

jquery更改css