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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
Div自动滚动到末尾的代码
Oct 26 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
微信小程序 bindtap 传参的实例代码
Feb 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Smarty模板配置实例简析
2019/07/20 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
使用python实现ANN
2017/12/20 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python Lambda函数使用总结详解
2019/12/11 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python接口自动化框架实战
2020/12/23 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
士力架广告词
2014/03/20 职场文书
大学生就业自荐书
2014/06/16 职场文书
医学专业大学生求职信
2014/07/12 职场文书
化工实习心得体会
2014/09/09 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
MySQL kill不掉线程的原因
2021/05/07 MySQL