{"id":1726,"date":"2008-05-11T10:54:13","date_gmt":"2008-05-11T07:54:13","guid":{"rendered":"http:\/\/mummila.net\/nuudelisoppa\/?p=1726"},"modified":"2010-09-23T17:04:06","modified_gmt":"2010-09-23T14:04:06","slug":"how-to-identify-a-stylesheet-in-javascript","status":"publish","type":"post","link":"https:\/\/mummila.net\/nuudelisoppa\/2008\/05\/11\/how-to-identify-a-stylesheet-in-javascript\/","title":{"rendered":"How to identify a stylesheet in JavaScript"},"content":{"rendered":"<p>I have been (mis)using the <a href=\"http:\/\/developer.mozilla.org\/en\/docs\/Correctly_Using_Titles_With_External_Stylesheets\"><code>title<\/code> attribute <\/a> of stylesheets to identify and grab a specific one for further processing with my JavaScript. I did this by comparing <a href=\"http:\/\/developer.mozilla.org\/en\/docs\/DOM:stylesheet.title\"><code>stylesheet.title<\/code><\/a> with a specified title for my embedded stylesheet. However, as I didn&#8217;t really intend the titled stylesheet to be a <em>preferred<\/em> one, once I added a title to another stylesheet higher up in the document, my other one (being lower in the document hierarchy) stopped working.<\/p>\n<p>This lead me to investigate the real significance of <code>title<\/code>, when applied to stylesheets. From what I&#8217;ve read, I have to say I&#8217;m somewhat confused by the logic with which the attribute has been named. After all, a <code>title<\/code> applied or left unapplied, to just about anything else on a web page is completely harmless, save perhaps for some decrease in the fine-tuning of your site&#8217;s accessibility. A <code>title<\/code> with relation to a stylesheet however, is <q>so significant that HTML 4.01 categorizes stylesheets according to the presence or absence of a title<\/q>. Although I don&#8217;t claim to know anything about writing specifications, I think they should have associated this categorization with the <code>rel<\/code> attribute, or at least name it differently so its significance wouldn&#8217;t get blurred by the use of <code>title<\/code> elsewhere. A stylesheet&#8217;s <code>title<\/code>&#8216;s role would then reduced to accessory information similar to what it is when associated with, say, an <a title=\"This is a title associated with an &lt;a&gt; element!\"><code>a<\/code> element<\/a>.<\/p>\n<p>Anyway, I&#8217;ve now come up with what I at least think is a better way of identifying my embedded stylesheet. I tag the <a href=\"http:\/\/www.w3.org\/TR\/xhtml1\/#C_14\"><code>style<\/code> element with an <code>id<\/code> attribute<\/a>, and then compare <code>stylesheet.ownerNode.id<\/code> with whatever the string I&#8217;ve tagged it with is. I&#8217;m not sure if it&#8217;s the correct way or even whether there is one, but it seems to be working and is valid. From the specification I gather there is <a href=\"http:\/\/www.w3.org\/TR\/html401\/present\/styles.html#h-14.2.3\">no <code>id<\/code> attribute<\/a> associated with <code>style<\/code> in HTML&nbsp;4, so it probably wouldn&#8217;t validate there. This isn&#8217;t a problem for me, since I nearly always use XHTML (Strict).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have been (mis)using the title attribute of stylesheets to identify and grab a specific one for further processing with my JavaScript. I did this by comparing stylesheet.title with a specified title for my embedded stylesheet. However, as I didn&#8217;t really intend the titled stylesheet to be a preferred one, once I added a title [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1726","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/posts\/1726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/comments?post=1726"}],"version-history":[{"count":1,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/posts\/1726\/revisions"}],"predecessor-version":[{"id":2396,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/posts\/1726\/revisions\/2396"}],"wp:attachment":[{"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/media?parent=1726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/categories?post=1726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mummila.net\/nuudelisoppa\/wp-json\/wp\/v2\/tags?post=1726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}