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


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 相关文章推荐
js类 from qq
Nov 13 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
深入理解React高阶组件
2017/09/28 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
python学习之编写查询ip程序
2016/02/27 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
基于Django实现日志记录报错信息
2019/12/17 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Python更换pip源方法过程解析
2020/05/19 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
商场营业员岗位职责
2015/04/14 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
nginx 配置指令之location使用详解
2022/05/25 Servers
如何利用python实现列表嵌套字典取值
2022/06/10 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript