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


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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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读取flv文件的播放时间长度
2009/09/03 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
师德师风个人总结
2015/02/06 职场文书
电力工程合作意向书
2015/05/11 职场文书