编程 Javascript

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

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，如

调用时很简单，如<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 相关文章推荐

JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)

Nov 03 Javascript

javascript 防止刷新,后退,关闭

Aug 07 Javascript

解决IE6的PNG透明JS插件使用介绍

Apr 17 Javascript

js获取系统的根路径实现介绍

Sep 08 Javascript

Javascript基础教程之switch语句

Jan 18 Javascript

jQuery判断指定id的对象是否存在的方法

May 22 Javascript

jQuery制作图片旋转效果

Feb 02 Javascript

详解React中的组件通信问题

Jul 31 Javascript

使用 Vue 绑定单个或多个 Class 名的实例代码

Jan 08 Javascript

详解html-webpack-plugin用法全解

Jan 22 Javascript

微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法

Feb 21 Javascript

vue实现登录页面的验证码以及验证过程解析(面向新手)

Aug 02 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

德劲1103的维修打理经验

2021/03/02 无线电

vs中通过剪切板循环来循环粘贴不同内容

2011/04/30 PHP

php加密算法之实现可逆加密算法和解密分享

2014/01/21 PHP

thinkphp3.2.2前后台公用类架构问题分析

2014/11/25 PHP

php中memcache 基本操作实例

2015/05/17 PHP

JavaScript 面向对象编程（2）定义类

2010/05/18 Javascript

JS+ACTIVEX实现网页选择本地目录路径对话框

2013/03/18 Javascript

如何使用Javascript获取距今n天前的日期

2013/07/08 Javascript

javascript初学者常用技巧

2014/09/02 Javascript

jQuery处理XML文件的几种方法

2016/06/14 Javascript

javascript实现一个网页加载进度loading

2017/01/04 Javascript

JS 组件系列之BootstrapTable的treegrid功能

2017/06/16 Javascript

js中对象和面向对象与Json介绍

2019/01/21 Javascript

Vue实现表格批量审核功能实例代码

2019/05/28 Javascript

javscript 数组扁平化的实现

2020/02/03 Javascript

解决Vue 移动端点击出现300毫秒延迟的问题

2020/07/21 Javascript

python抓取某汽车网数据解析html存入excel示例

2013/12/04 Python

在Python的web框架中中编写日志列表的教程

2015/04/30 Python

TensorFlow在MAC环境下的安装及环境搭建

2017/11/14 Python

Sanic框架异常处理与中间件操作实例分析

2018/07/16 Python

详解opencv Python特征检测及K-最近邻匹配

2019/01/21 Python

使用OpenCV实现仿射变换—平移功能

2019/08/29 Python

通过Turtle库在Python中绘制一个鼠年福鼠

2020/02/03 Python

django xadmin action兼容自定义model权限教程

2020/03/30 Python

python+adb+monkey实现Rom稳定性测试详解

2020/04/23 Python

pycharm开发一个简单界面和通用mvc模板(操作方法图解)

2020/05/27 Python

Django数据统计功能count()的使用

2020/11/30 Python

Html5 canvas画图白板踩坑

2020/06/01 HTML / CSS

澳大利亚在线家具、灯饰和家居装饰店：LivingStyles

2018/11/20 全球购物

美国在线宠物商店：Chewy

2019/01/12 全球购物

Viking Direct荷兰：购买办公用品

2019/06/20 全球购物

《乞巧》教学反思

2014/02/27 职场文书

小学生演讲稿大全

2014/04/25 职场文书

城管大队整治方案

2014/05/06 职场文书

JavaScript实例 ODO List分析

2022/01/22 Javascript

springmvc直接不经过controller访问WEB-INF中的页面问题

2022/02/24 Java/Android