0

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

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

我在跨度内的 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;");

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

4

6 回答 6

0

你的错误从这里开始：

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

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

var aa = document.getElementById('testdiv'); // gets my span
aa.style.width = "500px";
于 2013-02-26T14:51:50.937 回答
0

你可以这样做：

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

jsFiddle 示例

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

于 2013-02-26T14:56:25.553 回答
0

您不能为 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;
于 2013-02-26T14:58:22.097 回答
0

您只能将样式应用于 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。

于 2013-02-26T14:50:08.650 回答
0

您可以使用正则表达式执行此操作：

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

JsFiddle 示例

于 2013-02-26T15:02:51.890 回答
0

尝试

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.

decimalPart然后在你的css中为类添加样式

.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.

请注意，我已经考虑了占用多个字符的货币符号。

于 2013-02-26T15:05:16.467 回答