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


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创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
微信小程序 开发之全局配置
May 05 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
小程序实现悬浮搜索框
Jul 12 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获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
图片之间的切换
2006/06/26 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
js转html实体的方法
2016/09/27 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
python多线程操作实例
2014/11/21 Python
Python中的__slots__示例详解
2017/07/06 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python实现Windows电脑定时关机
2018/06/20 Python
python实现感知器算法(批处理)
2019/01/18 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
wxPython实现分隔窗口
2019/11/19 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
如何打开WebSphere远程debug
2014/10/10 面试题
教育课题研究自我鉴定范文
2013/12/28 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
低碳生活倡议书
2014/04/14 职场文书
营销与策划专业求职信
2014/06/20 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
决心书格式范文
2015/09/23 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL