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


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动态地获取系统时间实现代码
May 24 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 05 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
正则表达式语法
2006/10/09 Javascript
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
一个JavaScript继承的实现
2006/10/24 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
一个简易时钟效果js实现代码
2020/03/25 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python模块之time模块(实例讲解)
2017/09/13 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python实现归并排序算法
2018/11/22 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
洗手间标语
2014/06/23 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
亮剑观后感300字
2015/06/05 职场文书
python flask框架快速入门
2021/05/14 Python
python tqdm用法及实例详解
2021/06/16 Python
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技