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


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 浮动层菜单收藏
Jan 16 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
文章推荐系统(三)
2006/10/09 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
haskell实现多线程服务器实例代码
2013/11/26 Python
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python上selenium的弹框操作实现
2020/07/13 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
怎样从/向数据文件读/写结构
2014/11/23 面试题
2014年社区学雷锋活动总结
2014/03/09 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
集体生日活动方案
2014/08/18 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
校车安全管理责任书
2015/05/11 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
教你部署vue项目到docker
2022/04/05 Vue.js
python区块链持久化和命令行接口实现简版
2022/05/25 Python