1

so if there is an external css file like: 

<link rel='stylesheet' type='text/css' href='test.css'>

and we want to read the syle sheet using javascript, we can do it like: 

document.styleSheets[0].cssRules[0].cssText; (for example for first rule)

It works fine in firefox, but the same statement give's error in chrome, with something like Type Error: "non_object_property_load".

What could be the problem and how can we read style sheet in chrome?

Please have a look at the issue i am facing:

http://s4.postimage.org/x5q0xt1vh/file.png

EDIT: So the problem comes when the test file and linked css are placed locally on the system and are not access through webserver.

Improve this question
4
  • 1
    You might have to load the CSS via a AJAX request. Commented Nov 1, 2011 at 15:40
  • Is there a reason you're not just linking to the css? Maybe it would be easier to just construct the page with proper css links in the first place? Commented Nov 1, 2011 at 15:41
  • Could you provide a live example? It's likely to be due to some specific difference in how Chrome parses CSS that depends on the actual CSS being parsed. Commented Nov 1, 2011 at 15:44
  • >Blender, AJAX wont change anything, all i want is to read the CSS which is already rendered by the DOM. >evan, i do not understand what you mean to say. @namoul, it's simple. I am simple copy pastng this command in javascript console, with test.css linked to the page on which i am applying this command, it works in firefox console Commented Nov 1, 2011 at 15:52

3 Answers 3

Reset to default
1

Ok I found the problem. It was indeed security related, which works if the external css is in the same directory for firefox but does not work for chrome.
If css file is in another directory or online, it will not work in firefox as well.

Now to solve this problem, i started chrome with arguments --allow-file-access-from-files and now it is working perfectly fine as it should.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

http://www.quirksmode.org/dom/w3c_css.html - looks like .cssText isn't supported in Chrome

Improve this answer

2 Comments

Actually, the specific usage he gives in the example (document.styleSheets[0].cssRules[0].cssText) is supported by Chrome. It is the third one down from the first cssText usage.
I think there is something to do with security, as initially firefox was also givie security exception but then i moved the css file to the same directory (placed local on hdd), and it started working. Now if i open blank chrome tab, it works, but on any website or my local file it does not. Is there some flag that i have to set in chrome or soemething like that??
0

This works in Chrome (14 at least):

document.styleSheets[0].cssRules[0].cssText

That will give you the rule. While this:

document.styleSheets[0].cssRules[0].cssText[0]

will give you the first letter of the first rule.

Improve this answer

5 Comments

actually this is strange, because i am using 14.0.835.202 chrome and still i get type error with the same command.
So this doesn't work for you? jsfiddle.net/Tetaxa/JKFAD/1 That is strange. I get this output: body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; }
No, infact i just upgraded to chrome 15, and now the error is: TypeError: Cannot read property '0' of null
Weird. Works for me in 15.0.874.106 m
it works for me as well but only for pages which are on serve, not for local files and i want to do it for files on my local hdd

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.