php - 如何为 PHP 创建的动态 html 设置样式

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。hacky 方法是在加载后使用 JavaScript 对其进行修改。

Answer 3

这基于特里的回答：您可以简单地使用:after来模拟效果，并将该内容放在生成的 HTML 上。

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

http://jsfiddle.net/x2KN7/

Answer 4

它不可能通过 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 行中完成此操作。