编程 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 相关文章推荐

document 和 document.all 分别什么时候用

Jun 22 Javascript

用javascript实现的激活输入框后隐藏初始内容

Jun 29 Javascript

实现局部遮罩与关闭原理及代码

Feb 04 Javascript

Node.js生成HttpStatusCode辅助类发布到npm

Apr 09 Javascript

jQuery实现简单的日期输入格式化控件

Mar 12 Javascript

JavaScript中pop()方法的使用教程

Jun 09 Javascript

JavaScript中的函数（二）

Dec 23 Javascript

jQuery validate验证插件使用详解

May 11 Javascript

使用Promise链式调用解决多个异步回调的问题

Jan 15 Javascript

ionic2中使用自动生成器的方法

Mar 04 Javascript

微信小程序生成携带参数的二维码

Oct 23 Javascript

js+html+css实现手动轮播和自动轮播

Dec 30 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读取flv文件的播放时间长度

2009/09/03 PHP

ajax在joomla中的原生态应用代码

2012/07/19 PHP

PHP中空字符串介绍0、null、empty和false之间的关系

2012/09/25 PHP

Linux编译升级php的详细方法

2013/11/04 PHP

php等比例缩放图片及剪切图片代码分享

2016/02/13 PHP

php实现水印文字和缩略图的方法示例

2016/12/29 PHP

laravel实现查询最后执行的一条sql语句的方法

2019/10/09 PHP

判断是否输入完毕再激活提交按钮

2006/06/26 Javascript

js 数值项目的格式化函数代码

2010/05/14 Javascript

JQuery通过Ajax提交表单并返回结果

2011/07/31 Javascript

JavaScript面向对象(极简主义法minimalist approach)

2012/07/17 Javascript

jQuery选择器全面总结

2014/01/06 Javascript

SeaJS入门教程系列之使用SeaJS（二）

2014/03/03 Javascript

js图片自动轮播代码分享(js图片轮播)

2014/05/06 Javascript

详细解密jsonp跨域请求

2015/04/15 Javascript

你不知道的高性能JAVASCRIPT

2016/01/18 Javascript

详解Angular开发中的登陆与身份验证

2016/07/27 Javascript

无循环 JavaScript(map、reduce、filter和find)

2017/04/08 Javascript

Bootstrap布局之栅格系统学习笔记

2017/05/04 Javascript

微信小程序之购物车功能

2020/09/23 Javascript

NodeJS自定义模块写法(详解)

2017/06/27 NodeJs

JQuery实现table中tr上移下移的示例(超简单)

2018/01/08 jQuery

vue单页开发父子组件传值思路详解

2018/05/18 Javascript

vue-router权限控制(简单方式)

2018/10/29 Javascript

Nodejs对postgresql基本操作的封装方法

2019/02/20 NodeJs

微信小程序如何引用外部js，外部样式，公共页面模板

2019/07/23 Javascript

jQuery实现提交表单时不提交隐藏div中input的方法

2019/10/08 jQuery

JS实现前端动态分页码代码实例

2020/06/02 Javascript

Python中用函数作为返回值和实现闭包的教程

2015/04/27 Python

python中迭代器（iterator）用法实例分析

2015/04/29 Python

浅谈Python中重载isinstance继承关系的问题

2018/05/04 Python

Python爬虫之网页图片抓取的方法

2018/07/16 Python

使用Keras训练好的.h5模型来测试一个实例

2020/07/06 Python

拉斯维加斯酒店、演出、旅游、俱乐部及更多：Vegas.com

2019/02/28 全球购物

师德师风个人总结

2015/02/06 职场文书

电力工程合作意向书

2015/05/11 职场文书