HTML | DOM 样式 listStyleImage 属性(1)

📌 相关文章

📜 HTML | DOM 样式 listStyleImage 属性(1)

📅 最后修改于: 2023-12-03 14:41:50.099000 🧑 作者: Mango

HTML | DOM 样式 listStyleImage 属性

简介

listStyleImage 属性设置元素列表项的标记图像。该属性仅适用于<ul>和<ol>元素。在绝大多数浏览器中，默认值为none。然而，使用该属性设置自定义的标记图片，可以使网页更加美观。

语法

object.style.listStyleImage="none|url|initial|inherit"

属性值

none：默认值，没有标记图片。
url：指定的 URL 地址作为标记图片。
initial：元素设置为默认值。
inherit：从父元素继承该属性。

示例代码

设置标记图片

可以通过 CSS，为列表项设置标记图片。

遵循下面的步骤：

找到要设置标记图片的列表。
添加样式属性list-style-image，并附上图像的 URL 地址。

<!DOCTYPE html>
<html>
<head>
	<title>设置列表项标记图片</title>
	<style>
		ul {
			list-style-image:url('https://www.w3school.com.cn/i/eg_bullet.gif');
		}
	</style>
</head>
<body>
	<h2>设置列表项标记图片</h2>
	<ul>
		<li>列表项 1</li>
		<li>列表项 2</li>
		<li>列表项 3</li>
	</ul>
</body>
</html>

以上代码中，我们为<ul>元素添加样式属性list-style-image，并传递图像的 URL。

禁用标记图片

我们可以将样式属性list-style-image设置为none，禁用列表项的标记图片。

<!DOCTYPE html>
<html>
<head>
	<title>禁用列表项标记图片</title>
	<style>
		ul {
			list-style-image:none;
		}
	</style>
</head>
<body>
	<h2>禁用列表项标记图片</h2>
	<ul>
		<li>列表项 1</li>
		<li>列表项 2</li>
		<li>列表项 3</li>
	</ul>
</body>
</html>

以上代码中，我们设置了样式属性list-style-image为none，禁用了列表项的标记图片。

继承属性值

我们可以使用样式属性值inherit，从父元素继承该属性。

<!DOCTYPE html>
<html>
<head>
	<title>从父元素继承标记图片属性值</title>
	<style>
		div {
			list-style-image:url('https://www.w3school.com.cn/i/eg_bullet.gif');
		}
		ul {
			list-style-image:inherit;
		}
	</style>
</head>
<body>
	<h2>从父元素继承标记图片属性值</h2>
	<div>
		<ul>
			<li>列表项 1</li>
			<li>列表项 2</li>
			<li>列表项 3</li>
		</ul>
	</div>
</body>
</html>

以上代码中，我们将样式属性list-style-image应用于<div>元素，然后在<ul>元素中使用inherit，从<div>元素中继承该属性值。

结论

listStyleImage 属性设置元素列表项的标记图像。我们可以通过 CSS，为列表项设置标记图片。使用该属性设置自定义的标记图片，可以使网页更加美观。