编程 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 获取Gridview选中行的内容操作步骤

Feb 05 Javascript

用JS做的简单的可折叠的两级树形菜单

Sep 21 Javascript

使用js判断TextBox控件值改变然后出发事件

Mar 07 Javascript

AngularJS初始化过程分析(引导程序)

Dec 06 Javascript

JavaScript设计模式之工厂方法模式介绍

Dec 28 Javascript

webpack+vue.js实现组件化详解

Oct 12 Javascript

详解webpack 如何集成第三方js库

Jun 29 Javascript

小程序实现展开/收起的效果示例

Sep 22 Javascript

基于 vue-skeleton-webpack-plugin 的骨架屏实战

Aug 05 Javascript

浅谈实现在线预览PDF的几种解决办法

Aug 10 Javascript

javascript实现移动端上传图片功能

Aug 18 Javascript

Vue-Ant Design Vue-普通及自定义校验实例

Oct 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 array_map array_multisort 高效处理多维数组排序

2009/06/11 PHP

thinkphp文件处理类Dir.class.php的用法分析

2014/12/08 PHP

thinkphp5 加载静态资源路径与常量的方法

2017/12/24 PHP

js中几种去掉字串左右空格的方法

2006/12/25 Javascript

Jquery知识点二 jquery下对数组的操作

2011/01/15 Javascript

jquery入门——事件机制之事件中的冒泡现象示例解释

2020/09/12 Javascript

javascript简单事件处理和with用法介绍

2013/09/16 Javascript

JavaScript获取客户端计算机硬件及系统等信息的方法

2014/01/02 Javascript

JS 使用for循环遍历子节点查找元素

2014/09/06 Javascript

全面解析Bootstrap表单使用方法（表单控件）

2015/11/24 Javascript

Javascript基础_简单比较undefined和null 值

2016/06/14 Javascript

9个让JavaScript调试更简单的Console命令

2016/11/14 Javascript

js获取浏览器高度窗口高度元素尺寸偏移属性的方法

2016/11/21 Javascript

JS中如何实现Laravel的route函数详解

2017/02/12 Javascript

Extjs表单输入框异步校验的插件实现方法

2017/03/20 Javascript

移动端触摸滑动插件swiper使用方法详解

2017/08/11 Javascript

JS实现中文汉字按拼音排序的方法

2017/10/09 Javascript

JavaScript实现二叉树定义、遍历及查找的方法详解

2017/12/20 Javascript

Node.js 如何利用异步提升任务处理速度

2019/01/07 Javascript

JS实现将对象转化为数组的方法分析

2019/01/21 Javascript

jQuery实现消息弹出框效果

2019/12/10 jQuery

jquery实现简单每周轮换的日历

2020/09/10 jQuery

python引入导入自定义模块和外部文件的实例

2017/07/24 Python

python使用ddt过程中遇到的问题及解决方案【推荐】

2018/10/29 Python

python读写csv文件的方法

2019/08/13 Python

pytorch实现用Resnet提取特征并保存为txt文件的方法

2019/08/20 Python

python实现多线程端口扫描

2019/08/31 Python

使用python计算三角形的斜边例子

2020/04/15 Python

春秋航空官方网站：Spring Airlines

2017/09/27 全球购物

Allsole美国/加拿大：英国一家专门出售品牌鞋子的网站

2018/10/21 全球购物

Lululemon英国官网：加拿大瑜伽服装品牌

2019/01/14 全球购物

关于打架的检讨书

2014/01/17 职场文书

光盘行动倡议书

2014/02/02 职场文书

放飞梦想演讲稿

2014/05/05 职场文书

工作失职检讨书500字

2014/10/17 职场文书

日本动漫十大公认神作：第五现已全网禁播，《死亡笔记》在榜

2022/03/18 日漫