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


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 delete操作符应用实例
Jan 13 Javascript
Js切换功能的简单方法
Nov 23 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Javascript动画效果(3)
Oct 11 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
基于empty函数的判断详解
2013/06/17 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
python3去掉string中的标点符号方法
2019/01/22 Python
pymongo中group by的操作方法教程
2019/03/22 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
java程序员面试交流
2012/11/29 面试题
会计电算化专业自荐信
2014/03/15 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
运动会开幕词
2015/01/28 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
会议室管理制度范本
2015/08/06 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python