Question

我试图在“。”（点）之后获取所有字符，并使用JavaScript为它们设置一些样式。

示例：10.12美元。我想将一些样式设置为数字“12”。

我在span内的phtml文件中动态创建了这个数字。

我试过这样的事，但没有成功：

var aa = document.getElementById('testdiv').innerHTML; // gets my span
var bb = aa.toString().split(".")[1]; // gets all numbers after "."
bb.setAttribute("style","width: 500px;");

感谢大家！你真的帮了我我会投票给每一个答案，但不幸的是我还不能投票。

Answer 1

您只能将样式应用于HTML元素，而不是文本节点。

请改为尝试：

var elem = document.getElementById('testdiv');
var parts = elem.innerHTML.toString().split(".");
parts[1] = "<div style=\"width: 500px\">" + parts[1] + "</div>";
elem.innerHTML = parts.join(".");

我已经使用了，因为很明显已经应用了一种风格，但是如果你希望数字看起来是一致的，就像在新行上没有“12”的“$ 10.12”那样，你可能需要额外申请样式或重新考虑如何输出HTML。

Answer 2

你的错误从这里开始：

var aa = document.getElementById('testdiv').innerHTML; // gets my span

这不是你的范围，而是它的HTML内容。要注意设置宽度，你需要这样的东西：

var aa = document.getElementById('testdiv'); // gets my span
aa.style.width = "500px";

Answer 3

你可以这样做：

document.getElementById('testdiv').innerHTML = document.getElementById('testdiv').innerHTML.replace( /(\d+).(\d+)/, '$1.<span id="end">$2</span>' );
document.getElementById('end').style.fontWeight  = 'bold';

<强> jsFiddle example

您的示例在bb.setAttribute处失败，因为您尝试在字符串而不是节点上设置属性。您需要做的是基本上使用要更改的文本周围的10.12元素重建<span>，然后您可以使用其他JavaScript方法来修改样式。你使用的方法几乎是正确的，除了最后一部分不起作用，因为split()方法返回一个字符串，而不是一个节点。

Answer 4

你不能将样式设置为textNode，解决方法是创建一个元素来包装“。”之后的字符。通过使用跨度。这个想法很简单。首先将它拆分为“。”并检查它是否有“。”在内部，如果是，则创建一个元素来包装它并设置样式。最后，用“。”加入吧。

var inner = document.getElementById('testdiv').innerHTML;
var arr = inner.toString().split(".");

if(arr.length > 1)
{
   arr[1] = '<span style="display: inline-block; width: 500px;">' + arr[1] + '</span>';
}
newContent = arr.join(".");
document.getElementById('testdiv').innerHTML = newContent;

Answer 5

您可以使用regexp执行此操作：

onlyDigitsText = text.replace(/\.([0-9]*)/g, ".<span class='highlighted'>$1</span>");

JsFiddle example

Answer 6

尝试

var elem = document.getElementById('testdiv');
elem.innerHTML = elem.innerHTML.replace( /(\d+)\.(\d+)/g, '$1.<span class="decimalPart">$2</span>' );
// (\d+)    one or more digits
// \.       a dot character. Must be escaped otherwise it means ANY character
// (\d+)    one or more digits
// g        regex flag to replace all instances, not just one.

然后在你的css中添加decimalPart类

的样式

.decimalPart {
    width: 500px;
}

这具有将样式与html分开的附加优势。

<强>更新

根据您的评论，在使用数字之前获取字符

 elem.innerHTML.replace( /(\s)([^\s\d]*?)(\d+)\.(\d+)/g, '$1<span class="currencySymbol">$2</span>$3.<span class="decimalPart">$4</span>' );
// (\s)       space, tab, carriage return, new line, vertical tab, form feed
// ([\s\d]*?) any set of characters that are not a digit or the above zero or more times
// (\d+)      one or more digits
// \.         a dot character. Must be escaped otherwise it means ANY character
// (\d+)      one or more digits
// g          regex flag to replace all instances, not just one.

请注意我已经考虑了超过一个字符的货币符号。

javascript动态css样式

6 个答案: