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


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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
Javascript Promise用法详解
May 10 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 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 xml文件操作代码(一)
2009/03/20 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
简单谈谈favicon
2015/06/10 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python如何实现递归转非递归
2021/02/25 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
超市后勤自我鉴定
2014/01/17 职场文书
学雷锋的心得体会
2014/09/04 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
python区块链持久化和命令行接口实现简版
2022/05/25 Python