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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
js的对象与函数详解
Jan 21 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
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
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js实现进度条的方法
2015/02/13 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
js实现列表按字母排序
2020/08/11 Javascript
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
浅析Python中signal包的使用
2015/11/13 Python
Python selenium 三种等待方式解读
2016/09/15 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
详解python中list的使用
2019/03/15 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
个人自我鉴定
2013/11/07 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
超市国庆节促销方案
2014/02/20 职场文书
大专生找工作自荐书
2014/06/10 职场文书
节能环保标语
2014/06/12 职场文书
党员对照检查材料
2014/09/22 职场文书
同学会邀请函模板
2015/01/30 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL