why can't a css file be included in a .js?
in other words, why can't <style></style> syntax be included in a .js file? the js script and css works on my page when where are in the header but when I call them externally, the css fails?
-
You should ask a question like "why does this CSS not work" and post the actual CSS involve, with a description of exactly what happens, what errors are reported in the browser console, etc etc. It seems like you've made an assumption about how things work, and it's probably incorrect.Pointy– Pointy2015-10-06 21:12:13 +00:00Commented Oct 6, 2015 at 21:12
-
You could import a CSS file with JavaScriptAdjit– Adjit2015-10-06 21:13:43 +00:00Commented Oct 6, 2015 at 21:13
Add a comment
|
5 Answers
People who implemented <script> and <style> 15 or 20 years ago decided not to do that.
Things moved very, very fast in the 90s, in some ways at least.
Note that JavaScript pre-dated CSS by a couple of years. They were developed and driven by different companies. By the time CSS was invented, modifying browser JavaScript parsers to understand CSS blocks was a very unlikely thing to happen (and, in fact, it didn't).
Here's a guess: you moved one or more <script>...</script> blocks along with one or more <style> ... <style> blocks into a single file, and then tried to import it with a <script src="something"></script> tag. That won't work. Your external JavaScript and CSS files need to be pure JavaScript and pure CSS.
4 Comments
chignon
so would this suffice: <script type=text/javascript src=path/.js></script> <style><!-- //--></style>
Pointy
@chignon I don't know what that means. Did you move your entire
<script>...</script> and <style>...</style> blocks - including the HTML tags - to a separate file? If so, that doesn't work - when you use <script> and <link> tags to import JavaScript or CSS, the files must not have the HTML tags in them.chignon
<style>...</style> yes I moved them. so I guess move them back. sorry I'm still learning. So I should leave the <style> block on the main page then?
Pointy
@chignon you can move the CSS stuff to a plain CSS file and then import it with a
<link> tag - see this summary. You'll have two files: one JavaScript file (imported with a <script> tag) and one CSS file (via <link>). You can of course have more than one of each kind.Because you cannot style javascript, styles apply for html tags. If you include a style tag in a javascript file, what would the styles apply for?
2 Comments
I don't know of any way of including pure css in to a .js file, But there's an alternative.
You could use #getElementById().style.
Its not really practical but it's the only way that I know of.
Comments
There are several reasons:
- Cascading StyleSheets are describing how things look on your web page whereas JavaScript describes how things behave – they are used for completely different things.
- Websites should work without having JavaScript enabled. At least that's what I learned in the early days. If you included straight CSS in your JavaScript and the browser had JavaScript disabled then you wouldn't see those styles applied.
Comments
A .js file only contains Javascript. It's not an HTML file, so it isn't parsed for any kinds of <tagname> codes. You can't put <style> in it for the same reason that you don't surround the code with <script>...</script> inside the file (if you do this you'll get an error, because it's not Javascript). The contents of the file are treated like the contents inside a <script>...</script> block, and you're not allowed to put <style> in there, either -- it's only script code.
