Insert JavaScript in CSS

css|javascript| Insert

The creator of the Quirksmode site found an interesting trick. The Background-image property in CSS can be inserted into JavaScript. Unfortunately, only IE5/6 support is currently available. (IE7 I have no condition to test)

Run Code Box

<style type= "Text/css" > #test {border:1px solid #000000; padding:10px; Background-image:url (' Javascript:alert (" Did you see me? ")} </style><div id= "Test" > Display message Oh </div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

If we insert JavaScript into many different ID selectors in the CSS. The ID selector is only invoked in the preceding XHTML. The JavaScript code is not run. Instead of calling the ID selector, where the code does not run.

As follows, we have defined two ID selectors. Test1 and Test2. However, the test2 is not invoked in XHTML. So you can still only see the JavaScript code in test1.

Run Code Box

<style type= "Text/css" > #test1 {border:1px solid #000000; padding:10px; Background-image:url (' Javascript:alert ( "Have you seen me?"); #test2 {border:1px solid #000000; padding:10px background-image:url (' You can't see me! ') </style><div id= "Test1" > Display message Oh </div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

In addition to displaying messages, the author attempts to use this technique to generate random background images.
Background-image:url (Javascript:document.write (' pix/test ' + (parseint (Math.random () *5) +1) + '. gif ');

Unfortunately, after many attempts, the idea was ultimately considered impossible. I tried it myself. It doesn't produce a random background picture. It's just something that shows the background. And the browser continues to explain the rest of the running XHTML.