JavaScript修改css样式style


Posted in Javascript onApril 15, 2008

一、局部改变样式
分为改变直接样式,改变className和改变cssText三种。需要注意的是:
注意大小写:
javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。
调用方法:
如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.className=”…”的写法是错误的!只能写成:document.getElementById('obj').className=”…”
改变cssText
但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById('obj').style.cssText=”…”

改变直接样式我就不必说了,大家记得要写到具体样式即可,如
document.getElementById('obj').style.backgroundColor=”#003366″

二、全局改变样式
通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如 

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
调用时很简单,如 

<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。

基础知识
通常在网页中样式表的调用方法有三种。
第一种:链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head>
<title>文档标题</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
第二种:定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的和标记之间插入一个

块对象。 定义方式请参阅样式表语法。示例如下: 

<html>
<head>
<title>文档标题</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body> 
</body></html>
请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>

Javascript 相关文章推荐
怎么清空javascript数组
May 11 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
javascript的键盘控制事件说明
Apr 15 #Javascript
关于document.cookie的使用javascript
Apr 11 #Javascript
javascript比较文档位置
Apr 08 #Javascript
js函数般调用正则
Apr 08 #Javascript
javascript背投广告代码的完善
Apr 08 #Javascript
大家未必知道的Js技巧收藏
Apr 07 #Javascript
用JavaScript调用WebService的示例
Apr 07 #Javascript
You might like
phpBB BBcode处理的漏洞
2006/10/09 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
python使用suds调用webservice接口的方法
2019/01/03 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
python 实现识别图片上的数字
2019/07/30 Python
python 19个值得学习的编程技巧
2020/08/15 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
运动会通讯稿50字
2014/01/30 职场文书
学生安全教育材料
2014/02/14 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
三峡大坝导游词
2015/01/31 职场文书
朋友离别感言
2015/08/04 职场文书
高二数学教学反思
2016/02/18 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android