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


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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
JS制作简单的三级联动
Mar 18 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue实现简单瀑布流布局
May 28 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
js实现双色球效果
Aug 02 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
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
一月红领巾广播稿
2014/02/11 职场文书
销售类求职信
2014/06/13 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
Python访问Redis的详细操作
2021/06/26 Python
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
如何使用SQL Server语句创建表
2022/04/12 SQL Server