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 相关文章推荐
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
微信小程序实现左右列表联动
May 19 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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
destoon实现调用热门关键字的方法
2014/07/15 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
PyCharm配置mongo插件的方法
2018/11/30 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python pickle模块实现对象序列化
2019/11/22 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python项目跨域问题解决方案
2020/06/22 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
实习推荐信
2014/05/10 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
乌镇导游词
2015/02/02 职场文书
2014年个人年终总结
2015/03/09 职场文书
初中英语教学反思范文
2016/02/15 职场文书