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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
php 特殊字符处理函数
2008/09/05 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
个人工作总结范文2014
2014/11/07 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
标枪加油稿
2015/07/22 职场文书
校运会宣传稿大全
2015/07/23 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
改进工作作风心得体会
2016/01/23 职场文书