怎么给html加删除线

在HTML中，给文本加删除线可以通过使用<del>标签或者通过CSS样式来实现，下面将详细介绍这两种方法。

1. 使用<del>标签

<del>标签是HTML中的一种内联元素，它用来表示其中的文本已被删除或不再相关，默认情况下，浏览器会为<del>标签内的文本添加一条中线，以显示被删除的效果。

示例：

<p>原价 <del>¥100</del> 现价 ¥80</p>

在上述例子中，<del>标签包围了价格“¥100”，表明这个价格已经被删除或不适用。

2. 使用CSS样式

除了使用<del>标签，我们还可以通过CSS的text-decoration属性来给HTML元素添加删除线。text-decoration属性可以设置或检索元素的装饰线条，如 underline（下划线）、overline（上划线）和 line-through（中线），要添加删除线，我们可以使用line-through值。

直接应用到文本

可以直接将CSS样式应用到span或其他内联元素上。

示例：

<p>原价 <span style="text-decoration: line-through;">¥100</span> 现价 ¥80</p>

在这个例子中，span元素包裹了价格“¥100”，并通过内联样式text-decoration: line-through;为其添加了删除线。

应用到类或ID

为了更好的可维护性和重用性，通常建议将样式定义在CSS文件中，然后通过类（class）或ID选择器来应用这些样式。

示例：

<!-HTML -->
<p>原价 <span class="strikethrough">¥100</span> 现价 ¥80</p>
/* CSS */
<style>
.strikethrough {
    text-decoration: line-through;
}
</style>

在这个例子中，我们创建了一个名为.strikethrough的类，并将其应用于包含价格“¥100”的span元素，CSS规则定义了.strikethrough类将应用删除线样式。

注意事项

1、text-decoration属性不仅仅限于文本元素，还可以用于链接、图片等其他元素。

2、删除线的颜色和厚度可以通过其他CSS属性进行调整，例如color和text-shadow。

3、在某些移动设备上，<del>标签可能不会显示为删除线，因此使用CSS可能是更可靠的跨平台解决方案。

相关问题与解答：

Q1: 如何取消HTML元素的删除线？

A1: 要取消HTML元素的删除线，你可以将text-decoration属性设置为none，这将移除所有的装饰效果。

Q2: 可以使用JavaScript动态添加删除线吗？

A2: 当然可以，通过JavaScript，你可以动态更改元素的样式，你可以通过修改元素的style属性来添加或删除text-decoration: line-through;。

document.getElementById('myElement').style.textDecoration = 'line-through';

以上代码将会找到ID为myElement的元素，并给它添加删除线。