是否有可能採取的文本元素中，並顯示它:: CSS

Question

林桌子上工作之前，並試圖找出更自動化的方式來填補::before content: ' ';

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

我試圖使用javaScript來做到這一點。

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

是可以使用JavaScript來獲取id爲「文本」中的文本，並顯示它使用::「字」使用它之前在CSS？

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對象的類和你的內容的地圖之間的匹配。

所有這些只是黑客實現所需的行動，他們可能需要一些工作才能讓他們工作，但仍然。如果你真的需要做到這一點，是工作與JavaScript

Answer 2

一種方法是不用再擔心使用::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; 
    }); 
}); 

Answer 3

你可以在這裏使用一個技巧（你也需要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'); 
}); 

看看它的變化，如果確實如此，你可以改變dinamically 。