JS修改css样式style浅谈


Posted in Javascript onMay 06, 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="https://3water.com/demo.css" type="text/css"> 
</link> 
</head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="https://3water.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 Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
javascript实现标签切换代码示例
May 22 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
You might like
php采集速度探究总结(原创)
2008/04/18 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jquery实现动态画圆
2014/12/04 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
使用typescript构建Vue应用的实现
2019/08/26 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
python 判断自定义对象类型
2009/03/21 Python
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python添加模块搜索路径方法
2017/09/11 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python的re正则表达式实例代码
2018/01/24 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
C# .NET面试题
2015/11/28 面试题
历史教育专业个人求职信
2013/12/13 职场文书
社区包粽子活动方案
2014/01/21 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书