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 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
jquery处理json对象
Nov 03 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 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分页类
2013/10/26 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
js表单登陆验证示例
2016/10/19 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python分布式计算dispy的使用详解
2019/12/22 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
绿化工程实施方案
2014/03/17 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
低碳环保标语
2014/06/12 职场文书
五好家庭事迹材料
2014/12/20 职场文书
致运动员赞词
2015/07/22 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
python自动化八大定位元素讲解
2021/07/09 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang