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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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 购物车的例子
2009/05/04 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python处理cookie详解
2014/02/07 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python实现的文本编辑器功能示例
2017/06/30 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python3的输入方式及多组输入方法
2018/10/17 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
大学生自荐书范文
2013/12/10 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
读书活动实施方案
2014/03/10 职场文书
推荐信模板
2014/05/09 职场文书
星级党支部申报材料
2014/05/31 职场文书
心理学专业求职信
2014/06/16 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
爱的教育读书笔记
2015/06/26 职场文书
Python3 如何开启自带http服务
2021/05/18 Python