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


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 相关文章推荐
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
浅谈PHP语法(1)
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php不写闭合标签的好处
2014/03/04 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
再谈javascript原型继承
2014/11/10 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
python中使用np.delete()的实例方法
2021/02/01 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js