javascript dynamic css styling

Question

Я пытаюсь получить все символы после «.» (Точка) и установить для них стиль с помощью 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;"); 

Спасибо всем! Ты действительно помог мне. Я бы проголосовал за каждый ответ, но, к сожалению, я не могу голосовать.

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("."); 

Я использовал, потому что это сразу видно, что стиль был применен, но если вы хотите, число появляться последовательно, как в «$ 10.12» без «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, работа вокруг - создать элемент для обертывания символа после «.». используя 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; 

Answer 5

Вы можете сделать это с помощью регулярных выражений:

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.

UPDATE

После вашего комментария, чтобы получить символ непосредственно перед использованием номера

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. 

Пожалуйста, обратите внимание, я сделал поправку на валютных символов, которые занимают более одного символа.