函数说明：
可以有两种写法
$('li')['css']('background','green');
$('li').css('background','red');
两种写法也都可以改写成回调函数形式
效果图：
实例代码：
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery设置元素样式的几种方法</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>一</h3>
<button>css()方式</button>
<button>css()回调函数方式</button>
<h3>二</h3>
<button>['css']方式</button>
<button>['css']回调函数方式</button>
<script>
var btn1 = document.getElementsByTagName('button')[0];
btn1.onclick = function () {
// $('li')返回的是数组，且会自动遍历，不需要再写循环
// 批量设置样式
$('li').css('background','green');
}
var btn2 = document.getElementsByTagName('button')[1];
btn2.onclick = function () {
//回调方式
$('li').css({
'background':function () {
return 'blue';
}
});
}
var btn3 = document.getElementsByTagName('button')[2];
btn3.onclick = function () {
$('li')['css']('background','yellow');
}
var btn4 = document.getElementsByTagName('button')[3];
btn4.onclick = function () {
$('li')['css']({
'background':function () {
return 'red';
}
});
}
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
