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 相关文章推荐
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 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/06/05 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python实现图像拼接
2020/03/05 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
C#面试常见问题
2013/02/25 面试题
个人简历的自荐信
2013/10/23 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
贫困证明书范文
2015/06/16 职场文书
贷款担保书范本
2015/09/22 职场文书
《穷人》教学反思
2016/02/19 职场文书
2019军训心得体会
2019/06/27 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang