I'm trying to make a greasemonkey userscript that will work in Twitter conversations
and will colorize with the same color
the name+username of each poster plus each relevant @reply inside each tweet,
in order to easier distinguish which tweet replies to which one.
我正在尝试创建一个可以在Twitter对话中使用的greasemonkey用户脚本,并使用相同的颜色着色每张海报的名称+用户名以及每条推文中的每个相关的@reply,以便更容易区分哪些推文回复哪一个。
会话示例链接。
As I've examined the HTML code of the above conversation,
the CSS path(-in Chrome-, in Firefox's Inspector it's called 'unique selector)
of eg, the name of the first replier is:
当我检查上述对话的HTML代码时,CSS路径(在Chrome中,在Firefox的Inspector中称为'唯一选择器),例如,第一个回复者的名称是:
#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)
So, my question is: how can I apply to each such specific element a CSS property like: {color: red;} using Javascript?
所以,我的问题是:如何使用Javascript将每个这样的特定元素应用于:{color:red;}这样的CSS属性?
1 个解决方案
#1
2
You can use querySelector to get the (first) element that matches the selector. If it is, like you say, a unique selector, that should be all you need. Otherwise, you might use querySelectorAll to get all items that match the selector.
您可以使用querySelector来获取与选择器匹配的(第一个)元素。如果它像你说的那样,是一个独特的选择器,应该就是你所需要的。否则,您可以使用querySelectorAll来获取与选择器匹配的所有项目。
Of course, if the element would have an id, or if you know there is always at most one link, or div at a certain level, you could omit the nth-child additions. Those are added by FireFox to make the selector truly unique, but if you know the structure, they are not always needed.
当然,如果元素具有id,或者如果您知道最多只有一个链接,或者某个级别的div,则可以省略nth-child添加。 FireFox添加了这些选项以使选择器真正独一无二,但如果您知道结构,则并不总是需要它们。
// Get first element matching the selector. Use querySelectorAll to get all of them.
var element = document.querySelector('#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)');
element.style.color = 'red';
But usually you wouldn't need such a specific selector
但通常你不需要这样一个特定的选择器
#1
2
You can use querySelector to get the (first) element that matches the selector. If it is, like you say, a unique selector, that should be all you need. Otherwise, you might use querySelectorAll to get all items that match the selector.
您可以使用querySelector来获取与选择器匹配的(第一个)元素。如果它像你说的那样,是一个独特的选择器,应该就是你所需要的。否则,您可以使用querySelectorAll来获取与选择器匹配的所有项目。
Of course, if the element would have an id, or if you know there is always at most one link, or div at a certain level, you could omit the nth-child additions. Those are added by FireFox to make the selector truly unique, but if you know the structure, they are not always needed.
当然,如果元素具有id,或者如果您知道最多只有一个链接,或者某个级别的div,则可以省略nth-child添加。 FireFox添加了这些选项以使选择器真正独一无二,但如果您知道结构,则并不总是需要它们。
// Get first element matching the selector. Use querySelectorAll to get all of them.
var element = document.querySelector('#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)');
element.style.color = 'red';
But usually you wouldn't need such a specific selector
但通常你不需要这样一个特定的选择器