检测:通过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:
- 获取所有CSS块的列表
- 过滤掉不包含<$
- 迭代剩余的CSS块列表,然后运行
matchesSelector( )
,目标元素作为接收者,当前CSS块的选择器作为参数。
- Get a list of all CSS blocks
- Filter out CSS blocks which do not contain
:first-letter
in the block's selector - 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.
- 如果
matchesSelector()
返回true
- 否则移动到列表中的下一个CSS块
- If
matchesSelector()
returnstrue
, then the current CSS block's rules affect the target element's first letter. - 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屋!