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实现的论坛常用的运行代码的效果
Jul 15 Javascript
初学Javascript的一些总结
Nov 03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
JS生成随机打乱数组的方法示例
Dec 23 Javascript
vue生命周期的探索
Apr 03 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
vue - props 声明数组和对象操作
Jul 30 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与ASP
2006/10/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python 学习笔记
2008/12/27 Python
Python程序语言快速上手教程
2012/07/18 Python
python中尾递归用法实例详解
2015/04/28 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
小学生操行评语大全
2014/04/22 职场文书
我的小天地教学反思
2014/04/30 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
理想国读书笔记
2015/06/25 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python