jquery ul li值如何增加背景顏色

發(fā)布時(shí)間：2022-05-24 16:54:32 來源：億速云閱讀：920 作者：iii 欄目：web開發(fā)

這篇“jquery ul li值如何增加背景顏色”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“jquery ul li值如何增加背景顏色”文章吧。

兩種方法：1、用css()設(shè)置背景屬性，語法“$("ul li").css("background","顏色值")”。2、用attr()添背景樣式，語法“$("ul li").attr("style","background:顏色值")”。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery ul li值增加背景顏色的兩種方法：

1、使用css()

css() 方法返回或設(shè)置匹配的元素的一個(gè)或多個(gè)樣式屬性。

只需要給ul li元素添加背景屬性（background-color或background），設(shè)置顏色值。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                $("ul li").css("background","red");
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>第1個(gè)li元素</li>
			<li>第2個(gè)li元素</li>
			<li>第3個(gè)li元素</li>
			<li>第4個(gè)li元素</li>
			<li>第5個(gè)li元素</li>
			<li>第6個(gè)li元素</li>
		</ul>
		<button>ul li值增加背景顏色</button>
	</body>
</html>

2、使用attr()

attr() 方法設(shè)置或返回被選元素的屬性值。

只需要給ul li元素設(shè)置style屬性添加背景樣式即可。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                $("ul li").attr("style","background:pink");
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>第1個(gè)li元素</li>
			<li>第2個(gè)li元素</li>
			<li>第3個(gè)li元素</li>
			<li>第4個(gè)li元素</li>
			<li>第5個(gè)li元素</li>
			<li>第6個(gè)li元素</li>
		</ul>
		<button>ul li值增加背景顏色</button>
	</body>
</html>

以上就是關(guān)于“jquery ul li值如何增加背景顏色”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jquery ul li值如何增加背景顏色

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽