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 实现导航栏悬停效果
Sep 23 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
JQuery学习总结【二】
Dec 01 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 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内存溢出问题的解决方法
2013/06/25 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
使用js+jquery实现无限极联动
2013/05/23 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
面试常见的js算法题
2017/03/23 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python元组拆包实现方法
2021/02/28 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
一年级语文教学反思
2014/02/13 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
学校端午节活动方案
2014/08/23 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
云台山导游词
2015/02/03 职场文书
七一建党节慰问信
2015/02/14 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Python - 10行代码集2000张美女图
2021/05/23 Python
JavaScript实现登录窗体
2021/06/22 Javascript
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server