CSS 可以调用 JS 函数和变量. 下面本篇文章给大家介绍一下 CSS 中调用 JS 函数和变量. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 CSS 来调用 JS 程序. 这个技术是网络安全里的, 叫做 CSS 跨站.
我们知道 CSS 里是可以控制某些 html 元素的属性的, 譬如 background-image 等等, 而在 URL 里添加 JavaScript:alert() 等等类似的代码就可以用来执行代码.
我用的 CSS 代码如下:
- <style type="text/css">
- body{height:200px;background:url(JavaScript:alert("test!")); }
将这段代码随意插入到任何页面中都会执行其中的 JS 代码.
显然这开启了针对很多对于 CSS 具备自由编辑功能的很多 BSP(BLOG 服务提供商) 的攻击思路, 而对 CSS 入手的攻击目前作防范的很少.
从另一角度来看, 设计系统可以在 JS 设计时考虑利用 CSS 进行包含和引用. 这是很好的一个从 JS 控制 CSS 到 CSS 控制 JS 的一个反作用.
而深发出一个看法, 具体待验证: 凡是可以放 URL 的地方, 均可以试试放 JavaScript, 可能就能成功!
关键字: CSS 调用 JavaScript 代码 CSS 调用 JS 代码
CSS 中 expression 使用简介
定义
IE5 及其以后版本支持在 CSS 中使用 expression, 用来把 CSS 属性和 Javas cript 表达式关联起来, 这里的 CSS 属性可以是元素固有的属性, 也可以是自定义属性. 就是说 CSS 属性后面可以是一段 Javas cript 表达式, CSS 属性的值等于 Javas cript 表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法, 也可以使用其他浏览器对象. 这个表达式就好像是在这个元素的一个成员函数中一样.
给元素固有属性赋值
例如, 你可以依照浏览器的大小来安置一个元素的位置.
- #myDiv {
- position: absolute;
- width: 100px;
- height: 100px;
- left: expression(document.body.offsetWidth - 110 + "px");
- top: expression(document.body.offsetHeight - 110 + "px");
- background: red;
- }
给元素自定义属性赋值
例如, 消除页面上的链接虚线框. 通常的做法是:
- <a href="link1.htm" onfocus="this.blur()">
- link1
- </a>
- <a href="link2.htm" onfocus="this.blur()">
- link2
- </a>
- <a href="link3.htm" onfocus="this.blur()">
- link3
- </a>
粗看或许还体现不出采用 expression 的优势, 但如果你的页面上有几十甚至上百个链接, 这时的你难道还会机械式地 Ctrl+C,Ctrl+V 么, 何况两者一比较, 哪个产生的冗余代码更多呢?
采用 expression 的做法如下:
- <style type="text/css">
- a {star : expression(onfocus=this.blur)}
- </style>
- <a href="link1.htm">
- link1
- </a>
- <a href="link2.htm">
- link2
- </a>
- <a href="link3.htm">
- link3
- </a>
说明: 里面的 star 就是自己任意定义的属性, 你可以随自己喜好另外定义, 接着包含在 expression() 里的语句就是 JS 脚本, 在自定义属性与 expression 之间可别忘了还有一个引号, 因为实质还是 CSS, 所以放在 style 标签内, 而非 s cript 内. OK, 这样就很容易地用一句话实现了页面中的链接虚线框的消除. 不过你先别得意, 如果触发的特效是 CSS 的属性变化, 那么出来的结果会跟你的本意有差别. 例如你想随鼠标的移进移出而改变页面中的文本框颜色更改, 你可能想当然的会认为应该写为
- <style type="text/css">
- input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
- onmouseout=this.style.backgroundColor="#FFFFFF")}
- </style>
- <style type="text/css">
- input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
- onmouseout=this.style.backgroundColor="#FFFFFF")}
- </style>
- <input type="text">
- <input type="text">
- <input type="text">
可结果却是出现脚本出错, 正确的写法应该把 CSS 样式的定义写进函数内, 如下所示:
- <style type="text/css">
- input {star : expression(onmouseover=function() {this.style.backgroundColor="#FF0000"},
- onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
- </style>
- <input type="text">
- <input type="text">
- <input type="text">
!!! 注意
不是非常需要, 一般不建议使用 expression, 因为 expression 对浏览器资源要求比较高. 能不用则不用, 会导致性能问题.
还有就是在 IE 和 Firefox 下执行正常, 但是在 Chrome 中可能会失常 例如:
先看一段 HTML CODE, 在下边的这段 CODE 中, 图片宽度未知, 我们就在 CSS 中对该图片进行限制为 50px:
- <div id="test">
- <img src="http://www.zishu.cn/attachments/month_0702/n2007271255.gif"
- />
- </div>
如在 Firefox 或 IE 较高的版本可以直接写成 max-width. 在 IE 的低版本中, 我们可能会写成如下的 CODE:
#test img{width: expression(this.width> 50 ? '50px': true); max-width: 50px; }
但, 上面的 CODE 有一个性能上的问题, 性能會非常的差. 为什么差, 可以看一下之前写过的: expression 为什么性能差?
为了解決性能上的問題, 我把 CODE 写成了如下:
- #test img{
- width: expression(this.width> 50 ? function(abc){abc.style.width = '50px';}(this) : 'auto');
- max-width: 50px;
- }
写好后, 在 IE 和 Firefox 都是正常的!
但是, 在 Chrome 中就不同了, 在这行下边的所有 CSS 都不能加载; 如下边的 CODE, 最后一行 CSS 在 Chrome 中是不执行的;
- #test img{
- padding:10px;
- }
- #test img{
- width: expression(this.width> 50 ? function(abc){
- abc.style.width = '50px';
- }(this) : 'auto');
- max-width: 50px;
- }
- #test img{
- border:20px solid #FFCC00
- }
在 IE 和 Firefox 中是可以看到图片有黄色边框的, 但在 Chrome 中是沒有的.
expression 在 Chrome 中的问题要知道有這么回事, 写 CODE 时可以避免.
expression 的东西能不用就不要用, 一但用了还有性能問題, 为了解決性能问题又是出來了一个 Chrome 的問題.
为了解決 Chrome 的问題就又有性能问题了, 不知道有沒有更好的办法能兼容一下两者, 实在不行就得在外边用 JS 來跑了.
之后发现是 CODE 中的问题, 如果写成这样就沒有问题了, 少写了一个括号:
(function(abc){abc.style.width = '50px';})(this)
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17604.html