StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As far as I know there's no jQuery way to do this. There might be some jQuery plugin for this but I don't know.</p> <p>Basically, what you're trying to achieve in your first question is possible using the <code>styleSheets</code> property of the <code>document</code> object. It's a little bit more complicated than that as you need to walk to a rather deep object chain, but nevertheless works in all major browsers including Internet Explorer 6. Below is a proof of concept. The CSS is inside a STYLE tag, but works with external CSS just as well. I'll let you do the abstractions.</p> <h3>Proof of Concept</h3> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="imagetoolbar" content="false"> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> .classname { color: red; font-size: 14px; } </style> <script type="text/javascript"> window.onload = function() { document.getElementById("button").onclick = function() { var ss = document.styleSheets; for (var i=0; i<ss.length; i++) { var rules = ss[i].cssRules || ss[i].rules; for (var j=0; j<rules.length; j++) { if (rules[j].selectorText === ".classname") { rules[j].style.color = "green"; } } } }; } </script> </head> <body> <h1 class="classname">Some red text</h1> <button id="button">Make text green</button> </body> </html> </code></pre> <p>For your second question, I don't have time to write a solution but it would involve reading the CSS declarations just as above and use the <code>cssText</code> property of a CssRule object in order to build a string which will eventually be sent to the server using a Ajax POST request. The server side is your business.</p> <p>References:</p> <ul> <li><a href="https://developer.mozilla.org/En/DOM/Document.styleSheets" rel="noreferrer">document.styleSheets (Mozilla)</a></li> <li><a href="https://developer.mozilla.org/en/DOM/stylesheet" rel="noreferrer">styleSheet object (Mozilla)</a></li> <li><a href="https://developer.mozilla.org/en/DOM/cssRule" rel="noreferrer">CssRule object (Mozilla)</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/ms531200(VS.85).aspx" rel="noreferrer">document.styleSheets (MSDN)</a></li> <li><a href="http://msdn.microsoft.com/en-us/library/ms531199(VS.85).aspx" rel="noreferrer">CssRule object (MSDN)</a></li> </ul> <p>Hope it helps</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload