If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

The external CSS has clearly been loaded, but when you try to access the content of the external stylesheet you will stumble upon the browser SOP (same origin policy) which will consider the operation insecure.

Nevertheless, as soon as you create an element with for example class="style3" the external style will be applied correctly.

I need to be able to read the contents of the CSS file in JS like in the example. Obviously I can use the styles, but that's not what this is about.

Is there no way to do this?

As devnull69 has said, you are blocked by the Same Origin Policy.

JavaScript automatically prevents scripts on one server from accessing properties of documents on a different server. This restriction prevents scripts from, for example, fetching private information such as directory structures or user session history

Simply stated, the SOP states that JavaScript code running on a web page may not interact with any resource not originating from the same web site.

Don't ask for a work-around - there isn't one.

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.

I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.

Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.

I'm asking why CORS can't be used in this situation, because it could if I was making an XMLHttpRequest to submit data.

Why do you think I just want someone to post a load of code? Nobody learns that way. Surely you don't just hover around these forums posting code all day. Sometimes explaining things is better, quicker and more helpful.

I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.

All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.

so, one-at-a-time, you can sniff style properties. Note that you cannot hit pseudo-elements (:before/:after), and content: hello world; won't work either, so don't bother with that.

you can also send arbitrary text as the #hash of a background-image URL, or if you have clean CSV data, a font-family stack. you can "rip" both of those using getComputedStyle(). i've actually used to deliver tweets to an HTTPS client from HTTP without the dreaded popups about mixed zones, since the browser doesn't worry about css safety. a little janky, but it works.

I can't tell you that because I don't know anything about CORS. Ask rndme.
As I understand it the CORS standard works by adding new HTTP headers that allow servers to serve resources to permitted origin domains.
But Javascript still cannot access those resources due to the SOP.

Users who have thanked rnd me for this post:

The only way to access a different domain via Ajax is to call a script ron the server running on the same domain and have that script access the other domain for you.

The only way to pass information between JavaScript running on different domains is to set up message listeners in both scripts and use postMessage to send the messages across. Note that this requires either that you have access to update the scripts on both domains or the owner of the other domain has set up their side of the processing.

It is when the site you are trying to access doesn't allow ajax calls from other domains.

It is the site you are trying to access that has to have CORS implemented in order for cross domain ajax calls to work. Implementing it on your own site allows scripts on other sites access to your server but does not allow your scripts access to other servers.