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


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 相关文章推荐
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
原生JS中应该禁止出现的写法
May 05 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编程标准
2006/12/17 PHP
PHP 变量的定义方法
2010/01/26 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
移动端js图片查看器
2016/11/17 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python中的全局变量如何理解
2020/06/04 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
机电专业大学生职业规划书范文
2014/02/25 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书