Javascript动态CSS样式

javascript dynamic css styling

本文关键字：样式 CSS 动态 Javascript      更新时间：2023-09-26

我试图得到"。"(点)之后的所有字符，并设置一些样式的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;");

谢谢大家!你真的帮了我大忙。我想为每个答案投票，但遗憾的是我还不能投票。

你的错误从这里开始:

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

那不是你的span，而是它的HTML内容。为了设置宽度，你需要这样做:

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

只能对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(".");
我之所以使用

，是因为它已经应用了样式，但是如果您希望数字看起来一致，就像"$10.12"在新行中没有"12"一样，您可能需要应用其他样式或重新考虑如何输出HTML。

您不能为textNode设置style，解决方法是通过使用span创建一个元素来将"."后面的字符括起来。这个想法很简单。首先将它分割为"。"，检查里面是否有"。"，如果是，创建一个元素来包装它并设置样式。最后，通过"。" 

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;

你可以这样做:

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

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

您可以使用regexp:

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

JsFiddle示例

Try

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.

请注意，我已经允许使用超过一个字符的货币符号

相关文章：