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 相关文章推荐
jquery select下拉框操作的一些说明
Apr 02 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
使用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排序算法的复习和总结
2012/02/15 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
php源码的安装方法和实例
2019/09/26 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
详解jQuery中的事件
2016/12/14 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
《记承天寺夜游》教学反思
2014/02/16 职场文书
业务员的岗位职责
2014/03/15 职场文书
转让协议书范本
2014/09/13 职场文书
优秀团员自我评价
2015/03/10 职场文书
保险内勤岗位职责
2015/04/13 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
大学生十八大感想
2015/08/11 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
sql注入教程之类型以及提交注入
2021/08/02 MySQL