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 相关文章推荐
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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
Look And Say 序列php实现代码
2011/05/22 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP中“=&gt;
2019/03/01 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
5个JavaScript经典面试题
2014/10/13 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
阿里云:Aliyun.com
2017/02/15 全球购物
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
新书吧创业计划书
2014/01/31 职场文书
初中新生军训方案
2014/05/13 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
办公室管理规章制度
2015/08/04 职场文书
诚信教育主题班会
2015/08/13 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
加强党性修养心得体会
2016/01/21 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
 python中的元类metaclass详情
2022/05/30 Python