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


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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
微信小程序如何获取地址
Dec 24 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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的ZipArchive类用法实例
2014/10/20 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
python3.7 的新特性详解
2019/07/25 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python3 assert断言实现原理解析
2020/03/02 Python
详细分析Python垃圾回收机制
2020/07/01 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
生产管理的三大手法
2013/11/11 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
董事长开业致辞
2015/07/29 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
Python的property属性详细讲解
2022/04/11 Python