检测：通过javascript的第一个字母 [英] Detecting :first-letter by javascript

问题描述

我需要知道一个元素是否使用了第一个字母样式，它应该是一个通用的解决方案，所以我不依赖于类名或特殊的样式属性。有什么办法吗？示例：

I need to know if an element is styled with a :first-letter style, and it should be a general solution so I won't depend on class names or special style attributes. Is there any way? Example:

<p class="initial">First</p>
<p>Second</p>

.initial:first-letter {
float: left;
font-size: 1.5em;
font-weight: bold;
}

$('p').click(function(){
    // how to determine if :first-letter is applied to current paragraph?

});

推荐答案

如果您的CSS是自托管的，

If your CSS is self-hosted, you can:

1. 获取所有CSS块的列表


2. 过滤掉不包含<$


3. 迭代剩余的CSS块列表，然后运行 matchesSelector（ ） ，目标元素作为接收者，当前CSS块的选择器作为参数。
   

1. Get a list of all CSS blocks
2. Filter out CSS blocks which do not contain :first-letter in the block's selector
3. Iterate over the list of remaining CSS blocks, and run matchesSelector() with the target element as a receiver and the current CSS block's selector as the argument.

1. 如果 matchesSelector（）返回 true


2. 否则移动到列表中的下一个CSS块

1. If matchesSelector() returns true, then the current CSS block's rules affect the target element's first letter.
2. Otherwise move on to the next CSS block in the list

如果CSS不是自托管的，并且CDN不发送CORS头，那么你不能读取CSS文件源
隐私问题，这是不能做的。

If the CSS isn't self-hosted and the CDN doesn't send CORS headers, then you cannot read the CSS file source due to privacy issues and this cannot be done.

我也没有从算法中找出规则级联。路上的另一个障碍是弄清楚伪选择器以错误的方式影响 matchesSelector 。

I have also left out figuring out rule-cascading from the algorithm. Another bump in the road is to figure out what pseudo-selectors affect matchesSelector in a false way.

：

p.webkitMatchesSelector("p:first-letter") //false

因此，在尝试之前，必须从字符串中删除伪元素，如：first-letter 匹配，因为这些是不相关的（但是像：nth-​​child 这样的伪元素不是因为它们真正影响匹配）。

So one would have to remove pseudos like :first-letter from the string before attempting to match as these are irrelevant (but pseudos like :nth-child are not because they truly affect matching).

演示 http://jsfiddle.net/PBuzb/5/ （请记住我提到的问题是在这里没有处理得很好）（原来由Crush代码的基础）

Demo http://jsfiddle.net/PBuzb/5/ (keep in mind the problems I mentioned are not handled really well here) (The base of code originally by Crush)

为什么不允许读取CSS源在跨源情况下？

Why is it not allowed to read CSS source in cross-origin situation?

原因你只能显示图像，运行css / js等..从其他域BUT绝对不访问他们的数据， 。

The reason you can only show images, run css/js etc.. from other domains BUT absolutely not access their data in any way is privacy.

这种情况是最容易的图像。假设我已登录到Facebook，并且Facebook使用url作为私人照片，例如
http：// facebook。 com / myprofile.png 。现在我去evil.com，和evil.com可以加载图像，因为我登录到Facebook，
的facebook将给他们的图像。通常，他们无法访问图像或窃取它，无论如何，但如果我们启用
跨源数据访问，他们现在可以访问我的私人照片，并将其散开。

The case is easiest to make for images. Let's say I am logged in to facebook, and facebook uses url for private photo like http://facebook.com/myprofile.png. Now I go to evil.com, and evil.com can load the image because I am logged in to facebook, the facebook will give them that image. Normally they cannot access the image or steal it in anyway, but if we enabled cross-origin data access, they could now access my private photo and spread it out.

在CSS中也可能发生同样的情况，可能有由facebook服务器生成的用户特定的CSS，其中包含我的私人
朋友的用户ID。如果任何网站我可以去链接到那个css，然后开始阅读它们。他们不再私人了。

The same can happen in CSS, there could be user-specific CSS generated by the facebook server that contains user ids of my private friends. They are not so private anymore if any website I can go to can just link to that css and start reading it.

是的，主要的问题是浏览器如何发送cookie与跨源请求，如果浏览器没有发送cookie，当请求
facebook images / css从evil.com，然后facebook无法响应用户特定的CSS或我的私人照片，因为cookie

And yes, the main issue is how browsers send cookies with cross-origin request, if the browser didn't send cookies when requesting facebook images/css from evil.com, then facebook could not respond with user-specific css or my private photos because the cookies were necessary to recognize me.

现在想象一下，如果浏览器没有发送cookie。 Evil.com仍然可以访问任何Intranet数据，因为我的浏览器可以访问内部网。能够显示 http：//intranet/Myboss.jpg 作为evil.com网站上的图片不是问题，但Evil.com能够读取图像数据因此能够复制和传播是一个问题。

Now imagine if browsers didn't send cookies. Evil.com could still access any intranet data this way because my browser has access to the intranet. Being able to show http://intranet/Myboss.jpg as an image on evil.com website is not a problem, but Evil.com being able to read the image data and thus be able to copy and spread it is a problem.

这篇关于检测：通过javascript的第一个字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！