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


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实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 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
详解php中curl返回false的解决办法
2019/03/18 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Three.js学习之网格
2016/08/10 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python读写Redis数据库操作示例
2014/03/18 Python
python海龟绘图实例教程
2014/07/24 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python实现排序算法解析
2018/09/08 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
django rest framework 过滤时间操作
2020/07/12 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
旷课检讨书2000字
2014/01/14 职场文书
新教师岗前培训方案
2014/06/05 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫