当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用脚本调用样式的几种方法

Javascript
jquery ajax提交表单数据的两种方式
js数字输入框(包括最大值最小值限制和四舍五入)
文本框的字数限制功能jquery插件
JavaScript让IE浏览器event对象符合W3C DOM标准
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
js版扫雷实现代码 原理不错
鼠标跟随的文字变动效果
JS 判断undefined的实现代码
Ext grid 添加右击菜单
javascript或asp实现的判断身份证号码是否正确两种验证方法
javascript 获取元素位置的快速方法 getBoundingClientRect()
javascript 面向对象继承
JavaScript 地震特效
jquery.ui.progressbar 中文文档
JS 拖动效果实现代码 比较简单
JS小框架 fly javascript framework
JS在IE和FF下attachEvent,addEventListener学习笔记
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
js 动态选中下拉框

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 196 ::
收藏到网摘: n/a

之前经常遇见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”,也许会对你的疑惑有所帮助。