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


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 获取页面元素的位置的代码
Sep 25 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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 函数执行效率的小比较
2010/10/17 PHP
PHP写日志的实现方法
2014/11/05 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
常用的javascript function代码
2008/05/23 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python常用小技巧总结
2015/06/01 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python代码中怎么换行
2020/06/17 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
大学学习个人的自我评价
2014/02/18 职场文书
三方股东合作协议书
2014/10/28 职场文书
社区母亲节活动总结
2015/02/10 职场文书
接待员岗位职责
2015/02/13 职场文书
小学德育工作总结2015
2015/05/12 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
军训结束新闻稿
2015/07/17 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python