Can a JS script created in the body or head of an HTML file be used directly in CSS code?
Can a JS script created in the body or head of an HTML file be used directly in CSS code?
I am new to webpage development and have a technical question. If I write a javascript function and put it in the head or body of my HTML file, can the variables in the function be used directly in the CSS code to alter things like content positioning? Or must the function be called from the CSS file(s)?
Thanks for any and all input!
you can't call functions in CSS files
– JSmith
Aug 28 at 16:55
@treddie "JS" stands for "JavaScript". So "JS Script" is "JavaScript Script".
– Marie
Aug 28 at 17:00
I think what you are asking is, for instance, if your JavaScript code creates an element with a given class, and this class is declared in your CSS file, if this given class/style will be applied to this new element? If so, the answer is yes. It would be better if you provide the code, though. It may have a few exceptions.
– Fabio Manzano
Aug 28 at 17:01
JavaScript and CSS are two separate languages driven by separate "engines". The variables that you create in JavaScript can only be processed by more JavaScript. However, JavaScript can access your CSS styling as CSS Style Objects and dynamically alter the CSS that way.
– Scott Marcus
Aug 28 at 17:15
3 Answers
3
You can apply CSS on you html elements from the functions you created itself. Or please pass some code here to be more clear on in it.
General scenario can be as:
<html>
<head>
<script>
function useCSS()
$("#myElement").css("color","red");
</script>
</head>
<body>
<p id="myElement">This has to be changed!</p>
</body>
<script>
// function can be written anywhere in the script file or tags but ,has to be called after the element is loaded on page
useCSS();
</script>
It is not valid to have any code after the
</body> tag, except for the </html> tag.– Scott Marcus
Aug 28 at 17:13
</body>
</html>
Yup, i wrote in hurry, you are correct. But this will work, with no errors, as this is HTML we can do whatever we want and its not a big thing to consider. Well thanks for correction. :-)
– Shah Rukh Charlie
Aug 30 at 10:30
Uh, no, that's not true at all. Browsers don't throw validation errors, so you won't be alerted when you've made mistakes, but those mistakes can have a big impact on how the page is rendered and how it is rendered across different clients. You should always write valid HTML and you can validate it at validator.w3.org if you aren't using an editor that validates as you type.
– Scott Marcus
Aug 30 at 11:56
Writing JavaScript allows you to directly modify the DOM, not your CSS code. This produces the same effect you were anticipating but through different methods. If you're using a script element to write your JS you could use it to alter content positioning, but be aware of the order you load your CSS and scripts to avoid any conflicts.
You can indeed use JavaScript to modify CSS code using the CSSOM (CSS Object Model)
– Scott Marcus
Aug 28 at 17:12
Interesting, haven't seen that. However, given that the standard hasn't been officially adopted yet this likely won't be useful for the OP.
– Adam Britto
Aug 28 at 17:26
Cool though. Thanks for the info!
– treddie
Aug 28 at 17:38
The CSSOM has been around for many years and while not yet standard, it is fully supported in all modern browsers. It's true that we should be aware of standards, but it's also true that standards take many years to reach CR status and vendors do not wait for CRs to implement them. CSSOM is mature enough to use with confidence.
– Scott Marcus
Aug 28 at 18:02
No, you cannot call a function from CSS . JS will let you control the DOM elements.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Neither is possible. To use JS vars in CSS you have to set the CSS from a JS function
– Luca Kiebel
Aug 28 at 16:55