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


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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js中作用域的实例解析
Mar 16 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
实用的Vue开发技巧
May 30 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
用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
我的论坛源代码(七)
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
实例讲解PHP表单处理
2019/02/15 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
python 字符串只保留汉字的方法
2018/11/16 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
文艺晚会策划方案
2014/06/11 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
家长意见书
2015/06/04 职场文书
导游词之安徽九华山
2019/09/18 职场文书