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


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中的for如何实现foreach中的遍历
May 31 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
node.js中 stream使用教程
Aug 28 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 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
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
python实现随机梯度下降法
2020/03/24 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
中层干部岗位职责
2013/12/18 职场文书
军训教官感言
2014/03/02 职场文书
平安工地建设方案
2014/05/06 职场文书
班级标语大全
2014/06/21 职场文书
2014年卫生工作总结
2014/11/27 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL