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


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实现图片左右自动滚动示例
Sep 25 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
纯JS实现简单的日历
Jun 26 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
vue给对象动态添加属性和值的实例
Sep 09 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 daodb插入、更新与删除数据
2009/03/19 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
动手学习无线电
2021/03/10 无线电
js DataSet数据源处理代码
2010/03/29 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Numpy之文件存取的示例代码
2018/08/03 Python
详解Python 正则表达式模块
2018/11/05 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
大学生自荐材料范文
2014/12/30 职场文书
成本会计岗位职责
2015/02/03 职场文书
教师考核表个人总结
2015/02/12 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
中学总务处工作总结
2015/08/12 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
mysql脏页是什么
2021/07/26 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL