Как создать динамический html, созданный PHP

Question

Моя php-страница будет генерировать динамический html.

Следующий выход;

<label class="required">suject *</label> 

К сожалению, я не могу редактировать HTML-

Теперь мне нужно, чтобы показать «*» в красном цвете.

Как я могу написать css для этого?

Answer 1

Есть несколько способов сделать это:

Если у вас есть доступ к исходному коду PHP, то вы можете изменить выход соответственно, может быть Оберните * с <span> тегами и стилем соответственно.

Альтернатива, вы можете использовать JS, чтобы сделать то же самое:

$(document).ready(function() { 
    // Loop through all labels with required class 
    $('label.required').each(function() { 
     $(this).html($(this).html().replace(/\*/g, '<span class="asterisk">*</span>')); 
    }); 

}); 

И в вашем CSS, вы можете укладывать его в любом случае вы хотите:

.required .asterisk { 
    color: red; 
} 

См скрипку здесь - http://jsfiddle.net/teddyrised/JTesR/

Еще лучше: Использование CSS

Это написано в свете попыток быть как можно более семантически корректным - вы можете удалить символ * с помощью JS (или изменить код PHP), но использовать псевдокласс для добавления его обратно в элемент метки:

label.required:after { 
    content: '*'; 
    color: red; 
} 

Answer 2

CSS позволяет выбирать элементы (и ограниченное количество псевдоэлементов, таких как :first-line).

Невозможно выбрать «последний символ», «символы, соответствующие *» или что-нибудь еще, что сделало бы то, что вы хотите достичь.

Вы должны изменить DOM. Самый простой способ сделать это - изменить HTML, из которого он создан. Хакерным подходом было бы изменить его с помощью JavaScript после его загрузки.

Answer 3

Его невозможно с помощью CSS, но вы можете что-то сделать с помощью javascript. Если это содержимое генерируется при загрузке страницы, вы можете связать событие загрузки страницы, получить ссылку на этот элемент и внести изменения.

<script type='text/javascript'> 
document.onload = function (e) { 
    var col = document.getElementsByClassName("required"); 
    for (var i=0;i<col.length;i++) { 
    if (col[i].innerHTML == "subject *") { 
     col[i].innerHTML = "subject&nbsp;<span style='color:red'>*</span>"; 
    } 
    } 
} 
</script> 

Попробуйте вышеуказанное, мы надеемся, что оно решит вашу проблему. Я использовал простой javascript, но если вы знаете javascript-библиотеку (YUI, dojo, jquery), вы можете сделать это в 1 или 2 строке.

Answer 4

Это основано на ответе Терри: вы можете просто использовать :after для имитации эффекта и разместить этот контент по сгенерированному HTML.

label.required:after { 
    content: '*'; 
    color: red; 
    background:white; 
    position: relative; 
    left: -8px; 
} 

http://jsfiddle.net/x2KN7/