Computing desk
< January 20	<< Dec \| January \| Feb >>	January 22 >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is an archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

January 21

Class rule injection with JavaScript

How do you inject a stylesheet rule onto the page to create a class?

(I'd like to toggle the display property of the class, but the class needs to be defined first).

Since I don't have access to the sytle sheet, I'd like to do it right on the page (in the HTML). The Transhumanist 02:40, 21 January 2017 (UTC)[reply]

A search for "dynamic CSS javascript" seems to yield some promising results, including the article Dynamic style - manipulating CSS with JavaScript. -- Tom N talk/contrib 08:11, 21 January 2017 (UTC)[reply]

Thank you. That document covers stylesheet access and manipulation. What I need to do is inject stylesheet rules directly into the html of a page after it has been loaded into the browser. Locally, without access to the stylesheet server-side. The Transhumanist 11:07, 21 January 2017 (UTC)[reply]

A new stylesheet can be inserted using document.body.appendchild() or document.head.appendchild(). (The reference suggests the former, but the latter seems more appropriate to me. Both appear tohave the same results.) Here's a working example:

<html>
	<head>
		<title>Dynamic CSS example</title>
		<script>
			var colors = ["Red", "Green", "Blue"];
			var sequence = 0;

			function demo()
			{
				var newClassName = "newClass_" + sequence;
				var newColor = colors[sequence % colors.length];
				++sequence;

				var sheet = document.createElement('style');
				sheet.innerHTML = "." + newClassName + " { color:" + newColor + "; }";
				document.head.appendChild(sheet);
				
				document.getElementById("sampleText").className = newClassName;
				document.getElementById("sampleText").innerText = newClassName + " is " + newColor;
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="demo()">Click Me!</button>
		<div id="sampleText">Sample text</div>
	</body>
</html>

-- Tom N talk/contrib 18:25, 21 January 2017 (UTC)[reply]

The latter is what I'm looking for. Thanks! The Transhumanist 23:06, 25 January 2017 (UTC)[reply]

software project Euler

What software does the project Euler (at projecteuler.net) use? Is there some package that can provide an equivalent functionality? Like user accounts, keep track of progress, check for answers and so on. — Preceding unsigned comment added by 31.4.146.76 (talk) 23:08, 21 January 2017 (UTC)[reply]

Unfortunately, the references in our article (Project Euler) aren't helpful, since they are essentially primary sources from the website. --2606:A000:4C0C:E200:8C1C:681F:58B9:E020 (talk) 00:14, 23 January 2017 (UTC)[reply]

The source code is very clean. It is highly likely that much of the back-end code was written just for the site. When packages are used (such as Wordpress), the source code tends to become very convoluted. 209.149.113.5 (talk) 18:57, 23 January 2017 (UTC)[reply]

It seems like a standard Apache + PHP site (besides the obvious html5, js (Mathjax), css). It's not necessarily built with a ready-made platform (like WordPress). Hofhof (talk) 18:30, 24 January 2017 (UTC)[reply]