Home/ Questions/Q 763461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T16:33:51+00:00

I encountered a weird problem when trying to write a cross-browser script. Basically my

  • 0

I encountered a weird problem when trying to write a cross-browser script. Basically my header looks like this

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

Then in the body tag:

<p id="hey">Hey</p>
<input type="button" value="attachStyle" name="attachStyle" onclick="attachStyle();"></input>
<script>
function attachStyle() {
  var strVar="";
  strVar += "<style type='text\/css'>#hey {border:5px   solid   red;}<\/script>";
  $("head").append(strVar);
}
</script>

The button works in Firefox, but not in Chrome. When I looked at the html DOM elements in the developer tool, the style tag was inserted but without content, like this: 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type='text/css'></script>
</head>

I’m curious as to what causes this? And how to create CSS style in a way that is cross-browser? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <style type='text/css'></script>

    You started with a “style” tag and closed it with “script”. Wrong tag! 😛

    • 0