在CSS中插入javascript

css|javascript|插入

quirksmode站点的制作者发现了一个有趣的技巧.CSS中的background-image属性可以插入Javascript.遗憾的是目前只有IE5/6支持.(IE7我没有条件测试)

运行代码框

<style type="text/css">#test { border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("看到我了么?");')}</style><div id="test">显示消息哦</div>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

如果我们在CSS中多个不同的id选择器中都插入了Javascript.那么只有前面的XHTML中调用了该id选择器.才会运行该Javascript代码.而没有调用的id选择器,其中的代码不会运行.

如下,我们定义了两个id选择器.test1和test2.但是并没有在xhtml中调用test2.所以你仍然只能看到test1中的javascript代码.

运行代码框

<style type="text/css">#test1 { border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("看到我了么?");')}#test2 { border: 1px solid #000000; padding: 10px; background-image: url('javascript:alert("你看不到我!");')}</style><div id="test1">显示消息哦</div>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

除了显示消息之外,作者试图用这个技巧来生成随机的背景图片.
background-image: url(javascript: document.write('pix/test'+(parseInt(Math.random()*5)+1)+'.gif'));

遗憾的是,经过多次尝试,这个想法最终被认为是不可能的.我自己也试验了一下.并不能生成随机的背景图片.只是显示了背景的东西.并且覆盖了.原来的内容而且终止了浏览器继续解释运行xhtml的其余部分. 

时间: 2024-11-01 18:02:41

在CSS中插入javascript的相关文章

在HTML中插入JavaScript代码的示例

  这篇文章主要介绍了在HTML中插入JavaScript代码的示例,嵌套在HTML代码中是JavaScript的基本功能,需要的朋友可以参考下 在HTML文档中的任何地方可包括JavaScript代码.但也有以下的最佳方法来包含JavaScript在HTML文件. 在 ... 部分. 在 ... 部分. 在... 和... 部分. 脚本和外部文件,然后包括在... 部分. 在下面的章节中,我们将看到如何可以包含JavaScript方式的不同: 在JavaScript的... 部分: 如果你想在

在HTML中插入JavaScript代码的示例_基础知识

 在HTML文档中的任何地方可包括JavaScript代码.但也有以下的最佳方法来包含JavaScript在HTML文件.     在 <head>...</head> 部分.     在 <body>...</body> 部分.     在<body>...</body> 和<head>...</head> 部分.     脚本和外部文件,然后包括在<head>... </ head>

在ASP.Net中应用Javascript

概要 本文结合示例讲述了在ASP.net应用程序中如何利用客户端的Javascript脚本提高程序的执行效率并实现更多的功能. 一.ASP.Net与Javascript .Net是微软公司下一代的战略核心,ASP.Net是.Net战略在Web开发方面的具体实现.它继承了ASP的简单性和易用性,同时克服了ASP程序结构化较差,难于阅读和理解的缺点.特别是服务器端控件和事件驱动模式的引入,使得Web应用程序的开发更接近于过去桌面程序的开发. 在各种各样介绍ASP.Net的文章和书籍中,都把重点放在了

如何在网页中插入CSS

css|插入|网页 前面我们讲解了css的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外表样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用 link>标记链接到这个样式表文件,这个 link>标记必须放到页面的 head>区内,如下: <head> -- <link rel="sty

CSS入门:如何在网页中插入CSS

css|插入|网页 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下: <head>--<link href=&

CSS基础:如何在网页中插入CSS

css|插入|网页 如何在网页中插入CSS 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式. 1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:<head>--<

jsp页面中插入css样式的三种方法总结

 本篇文章主要是对jsp页面中插入css样式的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. 外部样式   当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部:   <head> <link rel="stylesheet"  type="text/css&qu

CSS样式和JavaScript脚本是应该放在外部文件中呢?

  CSS样式和JavaScript脚本是应该放在外部文件中呢? 还是把它们放在页面本身之内呢? 如何处理是关于一些性能规则的思维,52CSS.com就这些问题,作一些探讨. 在实际应用中使用外部文件可以提高页面速度,因为CSS样式和JavaScript脚本文件都能在客户端产生缓存.内置在HTML文档中的CSS样式和JavaScript脚本则会在每次请求中随HTML文档重新下载.这虽然减少了HTTP请求的次数,却增加了HTML文档的大小.从另一方面来说,如果外部文件中的CSS样式和JavaScr

如何在网页中插入CSS样式表

  本例为CSS入门系列教程,在这一课中我们将学习如何在网页中插入CSS样式表,主要学习在页面中插入链入外部样式表.内部样式表.导入外表样式表和内嵌样式的四种方法,另外作者还讲解了多重样式表的叠加的运用以及如何在xml中插入CSS,希望能给对网页制作感兴趣的朋友带来帮助~~ CSS入门教程之如何在网页中插入CSS样式表 前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内