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选择头像并实时显示的代码
Jun 27 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
js实现二级联动简单实例
Jan 11 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php阳历转农历优化版
2016/08/08 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
详解JS预解析原理
2020/06/16 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
Python读写unicode文件的方法
2015/07/10 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
为什么要使用servlet
2016/01/17 面试题
军校本科大学生自我评价
2014/01/14 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
2014年学校工作总结
2014/11/20 职场文书
《将心比心》教学反思
2016/02/23 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js