地址栏上的一段语句,改变页面的风格。(教程)


Posted in Javascript onApril 02, 2008

大家可以先把下面这段语句粘贴到地址栏,然后回车,看看效果。

javascript:with(document.body){background="";bgColor="#779966";text="#bb4400"};void(document.styleSheets[0].addRule("TD","border:1 solid black;background-color:#eef9ee!important"))

下面是解说:

1.javascript:url
伪url技术。它适用于所有包括href和src属性的标记:假如一个属性能接收url作为它的值,它就可以接收这个javascript:url ,地址栏相当于location.href,所以也不例外咯。:)

2.返回值
多数js语句会有返回值,这里我们并不需要返回值,以免它传递给href属性,使location.href起作用。
可以用alert这个不会产生返回值,但又会计算表达式的方法来达到我们的目的:把语句作为alert的参数,由alert来执行。
但是用alert会弹出计算的最终结果(即语句段最终的返回值),我们并不需要弹出框,只需要语句静静地执行,并且没有返回值。void运算符正是我们所需要的。

3.再谈返回值
在顺序执行的语句段中,如果每一句都有返回值,而某一个属性(比如href)只能接收一个返回值,它会接收哪一个返回值呢?答案是最后一个。因此,我们只需在最后一句加上void就行了。

4.with语句
with语句可以为用大括号括起来的一段语句段设定默认对象,以减少代码量。上面的with(document.body){background="";bgColor="#779966";text="#bb4400"}
即相当于:
document.body.background=""
document.body.bgColor="#779966"
document.body.text="#bb4400"

5.为已定义的样式表新增规则
document.styleSheets[0].addRule("TD","border:1 solid black")
上面这段语句给页面中的第一个样式表对象增加一个规则:让所有的表格单元带上一个象素宽的黑色实线边框。
styleSheets是页面上所有<style></style>和<link rel=stylesheet type=text/css href=***.css>元素的集合。styleSheets[0]是指第一个样式表元素。
addRule()方法用来给样式表对象插入规则。第一个参数是selector,第二个参数是对selector的定义。

6.样式表的!important属性
凡是具有!important属性的样式,在页面中具有优先权。举例:
<style>
p {color:red!important}
</style>
<p style="color:green">这里的文字是红色的。</p> 

好了,开头的那段语句就包括这些知识点,大家有没有在这基础之上的进一步的创新,让我学习学习?鼓励创新哦。:)

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Vue表单实例代码
Sep 05 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
cdn模式下vue的基本用法详解
Oct 07 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 #Javascript
JavaScript的面向对象方法以及差别
Mar 31 #Javascript
二行代码解决全部网页木马
Mar 28 #Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 #Javascript
js用图作提交按钮或超连接
Mar 26 #Javascript
利用js对象弹出一个层
Mar 26 #Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 #Javascript
You might like
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
Javascript学习指南
2014/12/01 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
高级Java程序员面试题
2016/06/23 面试题
英语求职信范文
2014/05/23 职场文书
新闻编辑求职信
2014/07/13 职场文书
房产遗嘱范本
2015/08/06 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
2016公司新年问候语
2015/11/11 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript