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调用webService实例代码(asp.net)
Aug 27 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
微信小程序日历效果
Dec 29 Javascript
Vue中fragment.js使用方法小结
Feb 17 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出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php类的定义与继承用法实例
2015/07/07 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
js倒计时小程序
2013/11/05 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python 正则表达式操作指南
2009/05/04 Python
Python线程创建和终止实例代码
2018/01/20 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
物流经理自我评价
2013/09/23 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
Python中的程序流程控制语句
2022/02/24 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS
Python中的socket网络模块介绍
2022/07/23 Python