JavaScript修改css样式style动态改变元素样式


Posted in Javascript onDecember 16, 2013

一、局部改变样式
分为改变直接样式,改变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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
angular *Ngif else用法详解
Dec 15 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 #Javascript
javaScript如何生成xmlhttp
Dec 16 #Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 #Javascript
JS实现模仿微博发布效果实例代码
Dec 16 #Javascript
JSON无限折叠菜单编写实例
Dec 16 #Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解vue-router基本使用
2017/04/18 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
详解Python time库的使用
2019/10/10 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android