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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
深入了解JavaScript 私有化
May 30 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 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读取txt文本文件并分页显示的方法
2015/03/11 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python统计cpu利用率的方法
2015/06/02 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
python读取xlsx的方法
2018/12/25 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python保留小数位的三种实现方法
2020/01/07 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
python中使用np.delete()的实例方法
2021/02/01 Python
python中添加模块导入路径的方法
2021/02/03 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
4s店活动策划方案
2014/08/25 职场文书
离婚协议书格式
2015/01/26 职场文书
500字小学生检讨书
2015/02/19 职场文书
如何撰写创业策划书
2019/06/27 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python