Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 5 of 5
  1. #1
    Enthusiast Abadax's Avatar

    Join Date
    Apr 2009
    Location
    North America
    Posts
    1,723

    CSS in External Javascript Function

    Hey guys. Haven't been here in a while, but I do remember you guys being pretty fantastic at programming especially website development. Mind helping me out a bit?

    Anyway, so long story short I'm trying to make some HTML markup and CSS in a function in an external JS file that I can call to so I don't have to copy paste code all the time and I can edit it once and its universal. I got the HTML to work, but not the CSS. Is it even possible to have CSS in a JS function to just function as normal CSS or am I just not doing it right?

    Here's my code:
    HTML:
    [spoiler:24tera39]
    Code:
    <html>
    	<head>
    		<script src="test.js"></script>
    		<title>
    			al;sdkfj
    		</title>
    		<style type="text/css">
    			<script>
    				test2();
    			</script>
    		</style>
    	</head>
    	<body>
    		<script>
    			test();
    		</script>
    	</body>
    </html>
    [/spoiler:24tera39]
    JS:
    [spoiler:24tera39]
    Code:
    function test()
    {
    	document.write(&#39;<div class="test"><h1>yo</h1></div>&#39;);
    };
    
    
    function test2()
    {
    	document.write(&#39;.test{background-color: red;}&#39;);
    }
    [/spoiler:24tera39]

    What I want it to do is this:

    but its just a normal h1:


    Again, is there no actually way to just have normal CSS in a function or am I just not doing this properly?

  2. #2
    Japanologist Wilio's Avatar

    Join Date
    Dec 2005
    Location
    Somewhere in time
    Posts
    5,561

    Re: CSS in External Javascript Function

    Code:
    <style type="text/css">
             <script>
                test2();
             </script>
          </style>
    You can't do that. Since you defined the type as "text/css" what goes in between is treated as such. What you could though is include the <style> tag in your javascript function.

    For what you are trying to do, I suggest you look into XML with a XSLT stylesheet.

  3. #3
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: CSS in External Javascript Function

    If you're really going to do it like that, do it inline;

    Code:
    <html>
    <head>
      <title>Title</title>
      <script type="text/javascript">
    
      function output() {
        var style = 'background:red;',
            h1    = '<h1 style="' + style + '">yo</h1>';
    
        return(h1);
      }
    
      </script>
    </head>
    <body>
      <script type="text/javascript">
    
      document.write(output());
    
      </script>
    
    </body>
    </html>

  4. #4
    Veteran Enthusiast LeadingManNigel's Avatar


    Join Date
    May 2005
    Location
    New York City
    Posts
    6,213

    Re: CSS in External Javascript Function

    Code:
    document.querySelector('.test').style.color="red";
    That should work.

  5. #5
    Insanity Skype's Avatar



    Join Date
    Apr 2007
    Location
    England
    Posts
    27,397

    Re: CSS in External Javascript Function

    ^ only supported in ie 8+ and opera 10+.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •