如何在 JQuery 中设置文本样式？答案

【问题标题】：How to style text in JQuery?如何在 JQuery 中设置文本样式？
【发布时间】：2014-11-25 20:09:07
【问题描述】：

我想让我的文本的一部分变得粗体并且比文本的另一部分更大。但目前我使用的 jquery 文本的大小、字体粗细和颜色都相同。例如，从我下面代码的第一个位开始，我希望出现“硬盘驱动器：辅助存储设备”。我希望硬盘驱动器是粗体字和标题。我希望另一半正常字体重量更小。如何使用我拥有的代码在 jquery 或 css 中设置它的样式？:)

如果您能提供帮助，我们将不胜感激！

这是我的 j 查询：

$('#harddrive').hover(function() {
$('#info').text('Hard drive: Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#cd').hover(function() {
$('#info').text('CD: External Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#fan').hover(function() {
$('#info').text('Fan: Used to keep the computer cool');
}, function() {
$('#info').text('');
});

$('#powerblock').hover(function() {
$('#info').text('Power Block: Provides power to the computer');
}, function() {
$('#info').text('');
});

【问题讨论】：

使用 .html() 而不是 .text() 并换行，然后使用 css 设置样式？
谢谢一百万 :) 已经完全看过了！

标签： jquery html css text styling

【解决方案1】：

如果要设置文本样式，请使用 .html() 而不是 .text()。

这是一个例子：

$('#harddrive').hover(function() {
$('#info').html('<h3><b>Hard drive:</b></h3> Secondary Storage Device');
}, function() {
$('#info').html('');
});

【讨论】：

【解决方案2】：

您需要更改 HTML 并使用 .html() 而不是 .text()。

例如：

$('#info').html('<h3>Hard drive:</h3> Secondary Storage Device');

【讨论】：

非常感谢一百万 :) 完全忽略了它！

【解决方案3】：

你不能，只要你只使用纯文本作为内容。改用 HTML，您可以随意设置标题的样式：

$('#cd').hover(
  function() {
    $('#info').html('<span class="header">CD:</span> External Secondary Storage Device');
  }, 
  function() {
    $('#info').empty();
  });

.header {
  font-size: larger;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a id="cd" href="#">CD</a>

<div id=info></div>

【讨论】：

【解决方案4】：

尝试类似的东西

$('#info').html('<b>Hard drive</b>: Secondary Storage Device');

【讨论】：

【解决方案5】：

您可以使用 JQuery 的$('#info').css()。使用$('#info').css(propertyName) 可以检索CSS 属性的值，也可以使用$('#info').css(propertyName, value) 进行设置。

如果您希望文本加粗，请使用$('#info').css('font-weight', 'bold')。

【讨论】：

【解决方案6】：

在 CSS 上创建一个类

.bold{
font-weight:bold;
}

然后只在你想要的悬停功能上将该类添加到#info

$( "#info" ).addClass( "bold" );

【讨论】：