用脚本调用样式的几种方法


Posted in Javascript onDecember 09, 2006

之前经常遇见classname、csstext之类的词,却不知道如何用。最近着手网站实际建设,收获颇多,给还不懂的人分享一下。

通常在网页中样式表的调用方法有四种。第一是外链,即<link rel="StyleSheet" href = "/control/css/base.css">的形式;第二是输入样式表;第三是在网页头部申明,如<head> <style type="text/css">...;最后是直接在对象后写样式,即<div style = "width:80%...;">的形式。我们用脚本调用样式,也要从这几方面入手。

一、通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

调用时很简单,如<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

二、局部改变样式,分为改变直接样式,改变className和改变cssText三种。需要注意的是:第一,javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。第二,如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像
document.getElementById('obj').style.className="..."的写法是错误的!
只能写成:document.getElementById('obj').className="..."

但是如果用cssText的话,必须加上style,正确的写法是:
document.getElementById('obj').style.cssText="..."

改变直接样式我就不必说了,大家记得要写到具体样式即可,如
document.getElementById('obj').style.backgroundColor="#003366"
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“JSS”,也许会对你的疑惑有所帮助。

Javascript 相关文章推荐
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
自定义Vue组件打包、发布到npm及使用教程
May 22 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
用js计算页面执行时间的函数
Dec 07 #Javascript
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 #Javascript
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 #Javascript
jQuery的一些注意
Dec 06 #Javascript
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 #Javascript
鼠标移动到一张图片时变为另一张图片
Dec 05 #Javascript
JS日历 推荐
Dec 03 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP运行模式的深入理解
2013/06/03 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
详解python的ORM中Pony用法
2018/02/09 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
2016年十一促销广告语
2016/01/28 职场文书