Question

我在桌子上工作，并试图找出一种更自动的方式填写::before content: ' ';

<table>
   <thead>
     <tr>
      <th id="text">word</th>
    </tr>
  </thead>

我试图用javaScript来做这件事。

table th:nth-child(1)::before {
    content: attr('');
}

是否可以使用javascript来获取id“text”中的文本并在css中使用它来使用:: before“word”之前显示它？

Answer 1

不，:before和其他类似的伪元素实际上不是dom的一部分，所以你不能用javascript选择它们。但是，如果您动态生成元素，则可以将伪元素的内容作为属性包含在实际元素中，并使用javascript

例如：

<table>
   <thead>
     <tr>
      <th id="text" before-content:"myBeforeContent">word</th>
    </tr>
  </thead>

如果您有一组预定的：例如在内容值之前，并且您在css文件中定义了所有这些内容，则可以在单个类中拆分：之前，并使用它来稍后与地图进行连接javascript中的内容

例如：

#myElement {

}

#myElement.redBeforeContentClass:before {
   content:"actual red content"
}

在javascript中，您可以使用以下地图：

{
"redBeforeContentClass", "actual red content"
}

此时，您可以在DOM对象的类和内容映射之间进行匹配。

所有这些只是实现所需行动的黑客，他们可能需要一些工作才能让他们工作，但仍然如此。如果你真的需要这样做，那就有效了

Answer 2

你可以在这里使用一个技巧（你也需要javascript）。

在CSS中，您可以写：

table th:nth-child(1)::before {
    content: attr(data-before-content);
}

在javascript上的文件就绪功能：

$(function() {
    $('table th:nth-child(1)').attr('data-before-content','new_value');
});

查看它是否发生变化，如果发生变化，你可以改变它。

Answer 3

javascript的一种方法是不用担心使用::before而只是将id添加到现有文本

$('tr').each(function(){
  $(this).find('td:first').text(function(_, oldText){
        return this.id + ' ' + oldText;
   });
});

或者使用html()

进行更多样式控制

$('tr').each(function(){
  $(this).find('td:first').html(function(_, oldHtml){
        return '<span class="ident">'+ this.id + '</span>' + oldHtml;
   });
});

是否可以将文本放在元素内并显示它::在css之前

3 个答案: