JS修改css样式style浅谈


Posted in Javascript onMay 06, 2013

一、局部改变样式

分为改变直接样式,改变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="https://3water.com/demo.css" type="text/css"> 
</link> 
</head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="https://3water.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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
JS类的封装及实现代码
Dec 02 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
微信小程序实现倒计时功能
2020/11/19 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python发送Email方法实例
2014/08/21 Python
Python数据结构之Array用法实例
2014/10/09 Python
python实现停车管理系统
2018/11/30 Python
Python基础教程之异常详解
2019/01/10 Python
python中append实例用法总结
2019/07/30 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python scatter函数用法实例详解
2020/02/11 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
python 两种方法删除空文件夹
2020/09/29 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
毕业生自我鉴定
2013/12/04 职场文书
人事档案接收函
2014/01/12 职场文书
总经理助理职责
2014/02/04 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL