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


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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
node错误处理与日志记录的实现
Dec 24 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入门源程序
2006/10/09 PHP
javascript 写类方式之四
2009/07/05 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
详解Python3 pickle模块用法
2019/09/16 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
Python: glob匹配文件的操作
2020/12/11 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
四风批评与自我批评范文
2014/10/14 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
工作能力自我评价2015
2015/03/05 职场文书
实习介绍信范文
2015/05/05 职场文书
三八节祝酒词
2015/08/11 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers