Каждой цифре свой стиль?
Добрый вечер дорогие форумчане, подскажите пожалуйста каким образом можно организовать стили для каждой цифры в определенном div'е
То есть имеется сплошной текст в котором встречаются (года) Пример: Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала. Хочу сделать чтобы у даты у каждого символа были стили Как бы реализовать что бы например все что в div'e data каждый символ автоматически заносился в <span> Например: <div class="data"><span>1</span><span>7</span><span>6</span><span>7</span></div> Спасибо за уделенное время! |
Смотря какие стили, где их будете брать для каждого свой? Вручную классы создавать? Тогда уж проще вбить вручную инлайн. Если только цвета, то можно так
<html> <head> </head> <body> <div> Дед по отцу Лев Александрович — артиллерии полковник, гвардии капитан. Отец — Сергей Львович Пушкин (<div class="data">1767</div>—<div class="data">1848</div>), светский острослов и поэт-любитель. Мать Пушкина — Надежда Осиповна (<div class="data">1775</div>—<div class="data">1836</div>), внучка Ганнибала. </div> <script> d=document.querySelector("div") gen=function(){ var gen=function(){return Math.floor(Math.random()*9)} return "#"+gen()+gen()+gen()+gen()+gen()+gen() } d.innerHTML=d.innerHTML.replace(/\d/g, function(year){return "<span style='font-size: "+gen().slice(-2)+"; color: "+gen()+"'>"+year+"</span>"}) </script> </body> </html> |
Решил пойти другим путем
что я делаю не так? почему у меня спан не в html а как текст отображатеся <div class="proverka"> 1234. </div> $(document).ready(function(){ $(".proverka").text(function(index, html) { return html.replace('1', '<span>1</span>').replace('2', '<span>2</span>'); }); }); |
Цитата:
<html> <head> </head> <body> <div class="proverka"> 1234. </div> <script> d=document.querySelector(".proverka") text=d.innerHTML text=text.replace("1", "<span>1</span>") text=text.replace("2", "<span>2</span>") d.innerHTML=text </script> </body> </html> |
krutoy,
спасибо тебе добрый человек))) |
Цитата:
Цитата:
|
рони,
спасибо увидел |
$(function(){ $(".proverka").html(function(index, html) { return html.replace(/\d/g, '<span>$1</span>'); }); }); |
Ruslan_xDD,
а g? |
столкнулся с проблемой
d=document.querySelector(".stata-sr") text=d.innerHTML text=text.replace("1", "<span>1</span>") text=text.replace("2", "<span>2</span>") text=text.replace("3", "<span>3</span>") text=text.replace("4", "<span>4</span>") text=text.replace("5", "<span>5</span>") text=text.replace("6", "<span>6</span>") text=text.replace("7", "<span>7</span>") text=text.replace("8", "<span>8</span>") text=text.replace("9", "<span>9</span>") text=text.replace("0", "<span>0</span>") d.innerHTML=text если цифра повторяется то js его не обрабатывает почему как исправить? в html получается так <div class="left stata-sr"><span>1</span><span>3</span>3</div> |
Часовой пояс GMT +3, время: 18:41. |